.site-footer{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;

  text-align:center;
  padding:14px 0;

  font-size:13px;
  color:rgba(255,255,255,.45);

  background:rgba(5,10,25,.6);
  backdrop-filter:blur(6px);

  border-top:1px solid rgba(255,255,255,.06);
}

/* ====================================================================================================================
   layout.twig / INFRA HEADER (hamburger mobile) — FIXED
   - Balance shows ONLY in header (never in menu)
   - When menu opens, header area doesn't "double show" balance
   - Header background returns to upstream dark (avoid iOS gray wash)
==================================================================================================================== */

/* ----------------------------------------------
   Tokens
---------------------------------------------- */
:root{
  --bg:#0b1020;
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.08);
  --text:rgba(255,255,255,.88);
  --muted:rgba(255,255,255,.60);
  --muted2:rgba(255,255,255,.44);
  --accent:#26d6a0;
  --accent2:#2ea8ff;
  --shadow2:0 12px 30px rgba(0,0,0,.30);
  --mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
}

html{ color-scheme: dark; }

/* ----------------------------------------------
   Optional global background (keep if you want)
---------------------------------------------- */
body{
  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(46,168,255,.14), transparent 60%),
    radial-gradient(900px 600px at 110% 0%, rgba(38,214,160,.14), transparent 55%),
    var(--bg);
  color:var(--text);
}

/* ----------------------------------------------
   Navbar base (Bootstrap neutralize)
   ※ iOS Safari の backdrop + 透明度で灰っぽく見えるので値を調整
---------------------------------------------- */
.navbar.navbar-default{
  background-color: rgba(7,10,18,.86) !important; /* ←元の濃さに戻す用 */
  background-image: none !important;
  border:0 !important;
  border-bottom:1px solid var(--line) !important;
  margin:0 !important;
  box-shadow:none !important;

  /* blurは効かせるが彩度/明るさで灰化しやすいので控えめ */
  backdrop-filter: blur(10px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
}

.navbar.navbar-static-top{ border-radius:0 !important; }

.navbar .container{
  padding-left:18px;
  padding-right:18px;
}

/* Brand color lock */
.navbar.navbar-default .navbar-brand,
.navbar.navbar-default .navbar-brand:hover,
.navbar.navbar-default .navbar-brand:focus{
  color:var(--text) !important;
  background:transparent !important;
}

/* ----------------------------------------------
   Header layout
---------------------------------------------- */
.infra-row{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:64px;
  padding:0;
}

/* subtle hairline glow */
.infra-row:after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(46,168,255,.28), transparent);
  opacity:.55;
  pointer-events:none;
}

/* ----------------------------------------------
   Brand
---------------------------------------------- */
.navbar-brand{
  padding:0 !important;
  margin:0;
  line-height:1;
  text-decoration:none !important;

  display:inline-flex;
  align-items:center;
  gap:10px;

  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:12px;
}


/* ----------------------------------------------
   Right side
---------------------------------------------- */
.infra-rightlinks{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  min-width:0;
}

/* ----------------------------------------------
   Balance pill (header only)
---------------------------------------------- */
.infra-balance{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  font-family:var(--mono);
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}

.infra-balance:before{
  content:"$";
  margin-right:2px;
  color:rgba(255,255,255,.70);
}

/* ----------------------------------------------
   Desktop text nav
---------------------------------------------- */
.infra-nav{
  display:flex;
  align-items:center;
  gap:16px;
}

.infra-link{
  color:var(--muted) !important;
  text-decoration:none !important;
  font-size:13px;
  line-height:1;
  white-space:nowrap;
  transition:color .12s ease;
}

.infra-link:hover{ color:var(--text) !important; }
.infra-link.active{ color:var(--text) !important; }

.infra-link[href*="logout"]:hover{ color:#ff8a96 !important; }

/* ----------------------------------------------
   Hamburger (details/summary) — Mobile
---------------------------------------------- */
.infra-menu{ position:relative; }
.infra-menu summary::-webkit-details-marker{ display:none; }

/* button */
.infra-menu-btn{
  cursor:pointer;
  display:none; /* shown on mobile */
  width:40px; height:40px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  align-items:center;
  justify-content:center;
}

/* icon */
.infra-burger,
.infra-burger:before,
.infra-burger:after{
  content:"";
  display:block;
  width:18px;
  height:2px;
  background:rgba(255,255,255,.78);
  border-radius:2px;
  position:relative;
}
.infra-burger:before{ top:-6px; position:relative; }
.infra-burger:after{ top:6px; position:relative; }

/* dropdown panel */
.infra-menu-panel{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  min-width:240px;
  padding:10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);

  /* 透過しすぎず濃すぎず */
  background:rgba(8,12,20,.74);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: var(--shadow2);

  display:none;
}
.infra-menu[open] .infra-menu-panel{ display:block; }

/* IMPORTANT:
   残高はヘッダー固定なので、メニュー内のBalance表示は "完全に無効化" */
.infra-menu-balance{ display:none !important; }

.infra-menu-item{
  display:flex;
  padding:11px 10px;
  border-radius:12px;
  color:rgba(255,255,255,.82);
  text-decoration:none;
  font-size:13px;
}

.infra-menu-item:hover{
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
}

.infra-menu-item.active{
  background:rgba(46,168,255,.14);
  color:rgba(255,255,255,.92);
}

.infra-menu-sep{
  height:1px;
  background:rgba(255,255,255,.08);
  margin:6px 6px;
}

.infra-menu-item.is-danger:hover{
  background:rgba(255,107,122,.10);
  color:#ff8a96;
}

/* ----------------------------------------------
   Prevent "visual duplicate" / overlay issues
   - Make sure menu sits above content but below nothing weird
---------------------------------------------- */
.navbar{ position:sticky; top:0; z-index:2000; }
.infra-menu-panel{ z-index:2100; }

/* ----------------------------------------------
   Mobile rules
---------------------------------------------- */
@media (max-width:640px){
  .infra-nav{ display:none; }
  .infra-menu-btn{ display:inline-flex; }

  /* keep header single-row */
  .infra-row{
    min-height:64px;
    padding:0;
  }

  /* if balance is too long, prevent pushing burger out */
  .infra-balance{
    max-width:56vw;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

/* ===========================================================================================================
   signin.twig / css
   signup
   resetpassword
=========================================================================================================== */

 

/* =================================
ROOT (api.twig と統一)
================================= */

:root{
  --bg: #0b1020;
  --line: rgba(255,255,255,.12);
  --line2: rgba(255,255,255,.08);
  --text: rgba(255,255,255,.86);
  --muted: rgba(255,255,255,.62);
  --muted2: rgba(255,255,255,.45);
  --accent2: #26d6a0;
  --warn: #ffcc66;
  --radius: 18px;
  --shadow: 0 18px 45px rgba(0,0,0,.35);
  --shadow2: 0 12px 30px rgba(0,0,0,.30);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
}

/* =================================
BACKGROUND (api.twig と同じ)
================================= */

.auth-bg{
  min-height:100vh;

  display:flex;
  justify-content:center;
  align-items:flex-start;

  padding:34px 0 70px;

  color:var(--text);

  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(124,92,255,.35), transparent 60%),
    radial-gradient(900px 600px at 80% 0%, rgba(38,214,160,.22), transparent 55%),
    radial-gradient(800px 600px at 50% 100%, rgba(255,92,122,.12), transparent 55%),
    var(--bg);
}

/* =================================
BOOTSTRAP GRID 無効化
================================= */

.auth-bg .container{
  width:min(520px,calc(100% - 32px));
}

.auth-bg .row{
  margin-left:0 !important;
  margin-right:0 !important;
}

.auth-bg .col-md-6,
.auth-bg .col-md-offset-3{
  float:none !important;
  width:100% !important;
  margin-left:0 !important;
}

/* =================================
CARD
================================= */

.auth-card{

  background:linear-gradient(
    180deg,
    rgba(255,255,255,.08),
    rgba(255,255,255,.04)
  );

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

  box-shadow:var(--shadow);

  overflow:hidden;

  position:relative;
}

.auth-card:before{

  content:"";

  position:absolute;

  inset:-2px;

  background:
    radial-gradient(520px 280px at 20% 20%, rgba(124,92,255,.25), transparent 55%),
    radial-gradient(520px 280px at 80% 30%, rgba(38,214,160,.18), transparent 55%);

  pointer-events:none;

}

.auth-card > *{
  position:relative;
}

/* =================================
HEADER
================================= */

.auth-head{

  padding:20px 22px 12px;

  border-bottom:1px solid rgba(255,255,255,.10);

}

.auth-title{

  font-size:18px;

  font-weight:900;

  letter-spacing:.02em;

}

/* =================================
FORM
================================= */

.auth-form{

  padding:18px 22px 22px;

}

.form-group{

  margin:14px 0;

}

/* =================================
LABEL
================================= */

.auth-label{

  display:block;

  font-size:11px;

  letter-spacing:.14em;

  text-transform:uppercase;

  color:rgba(255,255,255,.55);

  margin-bottom:8px;

}

/* =================================
INPUT
================================= */

.auth-input{

  width:100%;

  border-radius:14px;

  border:1px solid rgba(255,255,255,.12);

  background:rgba(255,255,255,.06);

  color:var(--text);

  padding:12px;

  font-size:14px;

  outline:none;

  transition:.15s;

}

.auth-input:focus{

  border-color:rgba(124,92,255,.35);

  background:rgba(255,255,255,.075);

  box-shadow:0 0 0 4px rgba(124,92,255,.14);

}

/* =================================
FORGOT PASSWORD
================================= */

.auth-forgot{

  display:inline-block;

  margin-top:10px;

  font-size:12px;

  color:var(--muted);

  text-decoration:none;

  border-bottom:1px dashed rgba(255,255,255,.25);

}

.auth-forgot:hover{

  color:var(--text);

}

/* =================================
BUTTON
================================= */

.auth-btn{

  width:100%;

  margin-top:16px;

  padding:12px;

  border-radius:14px;

  border:1px solid rgba(124,92,255,.40);

  background:rgba(124,92,255,.22);

  color:white;

  font-weight:900;

  letter-spacing:.08em;

  text-transform:uppercase;

  transition:.15s;

}

.auth-btn:hover{

  background:rgba(124,92,255,.30);

  border-color:rgba(124,92,255,.50);

  transform:translateY(-1px);

  box-shadow:var(--shadow2);

}

/* =================================
FOOT
================================= */

.auth-foot{

  display:flex;

  justify-content:flex-end;

  gap:8px;

  margin-top:14px;

  font-size:13px;

  color:var(--muted);

}

.auth-link{

  color:var(--text);

  text-decoration:none;

  border-bottom:1px solid rgba(38,214,160,.35);

}

.auth-link:hover{

  border-bottom-color:rgba(38,214,160,.70);

}

/* =================================
ALERT
================================= */

.auth-alert{

  border-radius:14px;

  padding:10px 12px;

  border:1px solid rgba(255,255,255,.12);

  background:rgba(255,255,255,.04);

  margin-bottom:14px;

  font-size:13px;

}

/* bootstrap alert override */

.alert{

  background:none;

  border:none;

  padding:0;

}

.alert-danger.auth-alert{

  border:1px solid rgba(255,92,122,.30);

  background:rgba(255,92,122,.10);

}

.alert-success.auth-alert{

  border:1px solid rgba(38,214,160,.28);

  background:rgba(38,214,160,.10);

}

/* =================================
CAPTCHA
================================= */

.auth-captcha{

  margin-top:12px;

}

/* =================================
MOBILE
================================= */

@media (max-width:520px){

  .auth-head{
    padding:18px 16px 10px;
  }

  .auth-form{
    padding:16px;
  }

}

/* ====================================================================================================================
  settingsのcss
==================================================================================================================== */


  :root{
    --bg: #0b1020;
    --line: rgba(255,255,255,.12);
    --line2: rgba(255,255,255,.08);
    --text: rgba(255,255,255,.86);
    --muted: rgba(255,255,255,.62);
    --muted2: rgba(255,255,255,.45);
    --accent2: #26d6a0;
    --warn: #ffcc66;
    --radius: 18px;
    --shadow: 0 18px 45px rgba(0,0,0,.35);
    --shadow2: 0 12px 30px rgba(0,0,0,.30);
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  }

  /* ==============================
     Page Background (api/signin統一)
  ============================== */

  .account-bg *{ box-sizing:border-box; }

  .account-bg{
    min-height: calc(100vh - 60px);
    padding: 34px 0 70px;
    color: var(--text);
    background:
      radial-gradient(1200px 700px at 20% -10%, rgba(124,92,255,.35), transparent 60%),
      radial-gradient(900px 600px at 80% 0%, rgba(38,214,160,.22), transparent 55%),
      radial-gradient(800px 600px at 50% 100%, rgba(255,92,122,.12), transparent 55%),
      var(--bg);
  }

  /* container幅をドキュメント寄りに */
  .account-bg .container.account-skin{
    width: min(980px, calc(100% - 32px));
    margin: 0 auto;
  }

  /* Bootstrap gridの余計な左右余白を抑える */
  .account-bg .row{ margin-left:0; margin-right:0; }
  .account-bg .col-md-8,
  .account-bg .col-md-offset-2{
    float:none;
    width:100%;
    margin-left:0;
    padding-left:0;
    padding-right:0;
  }

  /* ==============================
     Cards (wellを近代化)
  ============================== */

  .account-card.well{
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow2);
    padding: 18px;
    margin: 0 0 16px;
    position: relative;
    overflow: hidden;
  }

  /* うっすらグロー（api heroと同じノリ） */
  .account-card.well:before{
    content:"";
    position:absolute;
    inset:-2px;
    background:
      radial-gradient(520px 280px at 20% 20%, rgba(124,92,255,.18), transparent 55%),
      radial-gradient(520px 280px at 80% 30%, rgba(38,214,160,.12), transparent 55%);
    pointer-events:none;
  }
  .account-card.well > *{ position:relative; }

  /* ==============================
     Section titles / descriptions
  ============================== */

  .account-section-title{
    font-size: 13px;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(255,255,255,.70);
    margin: 0 0 10px;
    font-weight: 900;
  }

  .account-section-desc{
    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
    margin: 0 0 10px;
  }

  .account-meta{
    display:block;
    margin-top: 10px;
    color: rgba(255,255,255,.55);
    font-size: 12px;
  }

  /* ==============================
     Labels / Inputs (authと統一)
  ============================== */

  .account-label{
    display:block;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    margin: 0 0 8px;
  }

  .account-input.form-control{
    height:auto;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: var(--text);
    padding: 12px 12px;
    font-size: 14px;
    line-height: 1.2;
    outline: none;
    box-shadow: none;
    transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
  }

  .account-input.form-control::placeholder{
    color: rgba(255,255,255,.35);
  }

  .account-input.form-control:focus{
    border-color: rgba(124,92,255,.35);
    background: rgba(255,255,255,.075);
    box-shadow: 0 0 0 4px rgba(124,92,255,.14);
  }

  /* readonlyの見た目（インフラconsoleぽく） */
  .account-input[readonly]{
    background: rgba(255,255,255,.045);
    color: rgba(255,255,255,.78);
    border-color: rgba(255,255,255,.10);
    cursor: default;
  }

  /* Bootstrap form-group spacing調整 */
  .account-bg .form-group{ margin: 14px 0; }

  /* ==============================
     Buttons (authと統一)
  ============================== */

  .account-btn.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding: 12px 14px;
    border-radius: 14px;

    border: 1px solid rgba(124,92,255,.40);
    background: rgba(124,92,255,.22);

    color: rgba(255,255,255,.90);
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;

    transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
  }

  .account-btn.btn:hover{
    background: rgba(124,92,255,.30);
    border-color: rgba(124,92,255,.50);
    transform: translateY(-1px);
    box-shadow: var(--shadow2);
    color: rgba(255,255,255,.92);
  }

  .account-btn.btn:active{ transform: translateY(0); }

  /* btn-primary / btn-block の bootstrap影響を無力化 */
  .btn-primary.account-btn,
  .btn-primary.account-btn:focus,
  .btn-primary.account-btn:hover{
    outline: none;
    box-shadow: none;
  }

  /* Secondary (Cancel/Close) */
  .btn.btn-default{
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.80);
    padding: 12px 14px;
    transition: .12s ease;
  }
  .btn.btn-default:hover{
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.20);
    color: rgba(255,255,255,.90);
    transform: translateY(-1px);
  }

  /* ==============================
     Alerts (api/signin統一)
  ============================== */

  .account-alert.alert{
    border-radius: 14px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255,255,255,.86);
  }

  .alert.alert-danger.account-alert{
    border-color: rgba(255,92,122,.30);
    background: rgba(255,92,122,.10);
  }

  .alert.alert-success.account-alert{
    border-color: rgba(38,214,160,.28);
    background: rgba(38,214,160,.09);
  }

  /* ==============================
     2FA block tweaks
  ============================== */

  /* 2FA approve error block (id維持) */
  #2fa-approve-error-block.account-alert{
    margin-bottom: 12px;
  }

  /* one-time-code inputを強めに */
  #code.account-input{
    font-family: var(--mono);
    letter-spacing: .18em;
    text-align: left;
  }

  /* ==============================
     API Key field looks console-like
  ============================== */

  #api_key.account-input{
    font-family: var(--mono);
    letter-spacing: .02em;
  }

  /* ==============================
     Modal (Change Email) – 統一感
  ============================== */

  /* overlay */
  .modal-backdrop.in{ opacity:.6; }

  .modal-dialog{
    width: min(560px, calc(100% - 24px));
    margin: 60px auto;
  }

  .modal-content{
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow:hidden;
    color: var(--text);
    position: relative;
  }

  .modal-content:before{
    content:"";
    position:absolute;
    inset:-2px;
    background:
      radial-gradient(520px 280px at 20% 20%, rgba(124,92,255,.18), transparent 55%),
      radial-gradient(520px 280px at 80% 30%, rgba(38,214,160,.12), transparent 55%);
    pointer-events:none;
  }
  .modal-content > *{ position:relative; }

  .modal-header{
    border-bottom: 1px solid rgba(255,255,255,.10);
    padding: 16px 18px;
    background: rgba(255,255,255,.02);
  }

  .modal-title{
    font-size: 14px;
    letter-spacing: .10em;
    text-transform: uppercase;
    font-weight: 900;
    color: rgba(255,255,255,.86);
  }

  .modal-body{
    padding: 16px 18px;
  }

  .modal-footer{
    border-top: 1px solid rgba(255,255,255,.10);
    padding: 14px 18px;
    background: rgba(255,255,255,.02);
  }

  /* close button */
  .modal-header .close{
    color: rgba(255,255,255,.80);
    opacity: .8;
    text-shadow: none;
  }
  .modal-header .close:hover{ opacity: 1; }

  /* modal inputs reuse */
  .modal .account-label{ margin-top: 6px; }
  .modal .account-input.form-control{ width:100%; }

  /* changeEmailError block */
  #changeEmailError.alert{
    border-radius: 14px;
    padding: 10px 12px;
    border: 1px solid rgba(255,92,122,.30);
    background: rgba(255,92,122,.10);
    color: rgba(255,255,255,.88);
    margin-bottom: 12px;
  }

  /* ==============================
     Small polish
  ============================== */

  /* Remove default well padding/margins if any sneaks in */
  .well{ box-shadow:none; }

  /* Links inside account cards */
  .account-bg a{
    color: rgba(255,255,255,.82);
  }
  .account-bg a:hover{
    color: rgba(255,255,255,.92);
  }

  /* Responsive */
  @media (max-width: 520px){
    .account-bg{ padding: 26px 0 54px; }
    .account-card.well{ padding: 16px; }
    .modal-dialog{ margin: 18px auto; }
  }

/* ===== Modal: make it solid (no see-through) ===== */
.modal-content{
  background: #0f162a !important;              /* ほぼbg寄りの不透明 */
  border: 1px solid rgba(255,255,255,.14) !important;
}

.modal-header,
.modal-footer{
  background: #0f162a !important;              /* 上下も同じ面に */
}

.modal-body{
  background: #0f162a !important;
}

/* うっすらグローは残すなら :before を弱める */
.modal-content:before{
  opacity: .55;                                 /* 強すぎるなら下げる */
}

/* ===== Modal footer: hide Close button if X exists ===== */
#changeEmailModal .modal-footer .btn.btn-default{
  display: none !important;
}

/* 右寄せ崩れ防止（submitだけ残す） */
#changeEmailModal .modal-footer{
  text-align: right;
}

/* ghost button (secondary action) */
.account-btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 14px;
  border-radius:14px;

  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);

  color:rgba(255,255,255,.75);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;

  transition:.15s ease;
}

.account-btn-ghost:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.20);
  color:rgba(255,255,255,.90);
  transform:translateY(-1px);
}

/* ===== normalize button height (primary + ghost) ===== */
.account-btn,
.account-btn-ghost{
  height: 44px;
  padding: 0 16px;
  line-height: 44px;        /* 文字の縦位置を揃える */
  border-radius: 14px;
  box-sizing: border-box;
  vertical-align: middle;
  white-space: nowrap;
}

/* inline-flexのままでもOK。line-height揃えた方が安定 */
.account-btn{ display:inline-flex; align-items:center; }
.account-btn-ghost{ display:inline-flex; align-items:center; }

/* もしCancelにまだ btn-default / btn が残ってたら、これで殺す */
.account-btn-ghost.btn,
.account-btn-ghost.btn-default{
  padding: 0 16px !important;
  line-height: 44px !important;
  height: 44px !important;
}




<!-- =================================================================================================================================addfunsbalance =========================================================================================================== ---->


  :root{
    --bg: #0b1020;
    --line: rgba(255,255,255,.12);
    --line2: rgba(255,255,255,.08);
    --text: rgba(255,255,255,.86);
    --muted: rgba(255,255,255,.62);
    --muted2: rgba(255,255,255,.45);
    --accent2: #26d6a0;
    --warn: #ffcc66;
    --radius: 18px;
    --shadow: 0 18px 45px rgba(0,0,0,.35);
    --shadow2: 0 12px 30px rgba(0,0,0,.30);
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  }

  /* ==============================
     Page shell (api/signin/account統一)
  ============================== */
  .balance-bg *{ box-sizing:border-box; }
  .balance-bg{
    min-height: calc(100vh - 60px);
    padding: 34px 0 70px;
    color: var(--text);
    background:
      radial-gradient(1200px 700px at 20% -10%, rgba(124,92,255,.35), transparent 60%),
      radial-gradient(900px 600px at 80% 0%, rgba(38,214,160,.22), transparent 55%),
      radial-gradient(800px 600px at 50% 100%, rgba(255,92,122,.12), transparent 55%),
      var(--bg);
  }

  .balance-container{
    width: min(980px, calc(100% - 32px));
    margin: 0 auto;
  }

  /* Bootstrap grid offsetを殺して中央寄せ固定 */
  .balance-bg .row{ margin-left:0; margin-right:0; }
  .balance-bg .col-md-8,
  .balance-bg .col-md-offset-2{
    float:none;
    width:100%;
    margin-left:0;
    padding-left:0;
    padding-right:0;
  }

  .balance-stack{ margin-top: 16px; }

  /* ==============================
     Card
  ============================== */
  .balance-card{
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow2);
    padding: 18px;
    position: relative;
    overflow: hidden;
  }

  .balance-card--tight{ padding: 16px; }

  .balance-card:before{
    content:"";
    position:absolute;
    inset:-2px;
    background:
      radial-gradient(520px 280px at 20% 20%, rgba(124,92,255,.18), transparent 55%),
      radial-gradient(520px 280px at 80% 30%, rgba(38,214,160,.12), transparent 55%);
    pointer-events:none;
  }
  .balance-card > *{ position:relative; }

  .balance-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap: 14px;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,.10);
  }

  .balance-title{
    font-size: 16px;
    letter-spacing: .10em;
    text-transform: uppercase;
    font-weight: 900;
    color: rgba(255,255,255,.90);
  }

  .balance-sub{
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
    margin-left:auto;
    text-align:right;
  }

  @media (max-width: 640px){
    .balance-head{ flex-direction:column; align-items:flex-start; }
    .balance-sub{ text-align:left; }
  }

  /* ==============================
     Alerts
  ============================== */
  .balance-alert.alert{
    border-radius: 14px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255,255,255,.86);
  }
  .alert.alert-danger.balance-alert{
    border-color: rgba(255,92,122,.30);
    background: rgba(255,92,122,.10);
  }
  .alert.alert-success.balance-alert{
    border-color: rgba(38,214,160,.28);
    background: rgba(38,214,160,.09);
  }

  /* ==============================
     Form
  ============================== */
  .balance-form .form-group{ margin: 14px 0; }

  .balance-label{
    display:block;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    margin: 0 0 8px;
  }

  .balance-min{
    display:inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.65);
    font-size: 11px;
    letter-spacing: .06em;
    font-family: var(--mono);
    text-transform: none;
  }

  .balance-input.form-control{
    height:auto;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: var(--text);
    padding: 12px 12px;
    font-size: 14px;
    line-height: 1.2;
    outline: none;
    box-shadow: none;
    transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
  }

  .balance-input.form-control::placeholder{
    color: rgba(255,255,255,.35);
  }

  .balance-input.form-control:focus{
    border-color: rgba(124,92,255,.35);
    background: rgba(255,255,255,.075);
    box-shadow: 0 0 0 4px rgba(124,92,255,.14);
  }

  select.balance-input{
    appearance:none;
    background-image:
      linear-gradient(45deg, transparent 50%, rgba(255,255,255,.55) 50%),
      linear-gradient(135deg, rgba(255,255,255,.55) 50%, transparent 50%);
    background-position:
      calc(100% - 18px) calc(50% - 3px),
      calc(100% - 12px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 34px;
  }

  /* ==============================
     Primary button (Pay)
  ============================== */
  .balance-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    height: 44px;
    padding: 0 18px;
    border-radius: 14px;

    border: 1px solid rgba(124,92,255,.40);
    background: rgba(124,92,255,.22);

    color: rgba(255,255,255,.90);
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;

    transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
    user-select:none;
  }

  .balance-btn:hover{
    background: rgba(124,92,255,.30);
    border-color: rgba(124,92,255,.50);
    transform: translateY(-1px);
    box-shadow: var(--shadow2);
    color: rgba(255,255,255,.92);
  }

  .balance-btn:active{ transform: translateY(0); }

  /* ==============================
     Provider HTML wrapper (addfunds)
     ※ 中身はプロバイダが吐くHTMLなので “囲い” で統一
  ============================== */
  .balance-provider{
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.18);
    padding: 14px;
    overflow: hidden;
  }

  /* provider内のtable/input/btnが暴れがちなので最低限だけ整える */
  .balance-provider table{
    width:100%;
    border-collapse: collapse;
  }
  .balance-provider td,
  .balance-provider th{
    padding: 10px 10px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.80);
    font-size: 13px;
  }
  .balance-provider tr:last-child td,
  .balance-provider tr:last-child th{ border-bottom:none; }

  .balance-provider input,
  .balance-provider select,
  .balance-provider textarea{
    width:100%;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: var(--text);
    padding: 12px 12px;
    outline: none;
  }

  .balance-provider a{
    color: rgba(255,255,255,.88);
    text-decoration: none;
    border-bottom: 1px dashed rgba(255,255,255,.28);
  }
  .balance-provider a:hover{
    color: rgba(255,255,255,.95);
    border-bottom-color: rgba(255,255,255,.45);
  }

  /* ==============================
     Funding History table
  ============================== */
  .balance-table-wrap{
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.16);
  }

  .balance-table.table{
    margin: 0;
    width:100%;
    border-collapse: collapse;
    background: transparent;
  }

  .balance-table thead th{
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.62);
    font-weight: 900;
    background: rgba(255,255,255,.04);
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    padding: 12px 12px;
    vertical-align: middle;
  }

  .balance-table tbody td{
    padding: 12px 12px;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    color: rgba(255,255,255,.80);
    font-size: 13px;
    vertical-align: middle;
  }

  .balance-table tbody tr:hover td{
    background: rgba(255,255,255,.03);
  }

  .nowrap{ white-space: nowrap; }

  .balance-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.82);
    text-decoration:none;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition:.12s ease;
  }
  .balance-link:hover{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.20);
    color: rgba(255,255,255,.92);
    transform: translateY(-1px);
  }

  /* ==============================
     Pagination (Bootstrap override)
  ============================== */
  .balance-pagination{
    margin-top: 14px;
    display:flex;
    justify-content:flex-end;
  }

  .pagination{
    margin: 0;
    border-radius: 999px;
    padding: 6px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
  }

  .pagination>li>a,
  .pagination>li>span{
    background: transparent;
    border: 1px solid transparent;
    color: rgba(255,255,255,.78);
    border-radius: 999px !important;
    margin: 0 2px;
    min-width: 34px;
    text-align:center;
    font-family: var(--mono);
    font-size: 12px;
    padding: 8px 10px;
    transition:.12s ease;
  }

  .pagination>li>a:hover{
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.10);
    color: rgba(255,255,255,.92);
  }

  .pagination>li.active>a,
  .pagination>li.active>span{
    background: rgba(124,92,255,.22) !important;
    border-color: rgba(124,92,255,.40) !important;
    color: rgba(255,255,255,.92) !important;
  }


/* ======================================================================
   API DOCS
====================================================================== */

:root{
  --bg:#0b1020;
  --line:rgba(255,255,255,.12);
  --line2:rgba(255,255,255,.08);
  --text:rgba(255,255,255,.86);
  --muted:rgba(255,255,255,.62);
  --muted2:rgba(255,255,255,.45);
  --accent:#26d6a0;
  --warn:#ffcc66;
  --radius:18px;
  --shadow:0 18px 45px rgba(0,0,0,.35);
  --shadow2:0 12px 30px rgba(0,0,0,.30);
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Courier New",monospace;
}

.api-wrap *{box-sizing:border-box}
.api-wrap{color:var(--text)}

.api-bg{
  background:
    radial-gradient(1200px 700px at 20% -10%,rgba(124,92,255,.35),transparent 60%),
    radial-gradient(900px 600px at 80% 0%,rgba(38,214,160,.22),transparent 55%),
    radial-gradient(800px 600px at 50% 100%,rgba(255,92,122,.12),transparent 55%),
    var(--bg);
  padding:34px 0 70px;
}

.api-container{
  width:min(1160px,calc(100% - 32px));
  margin:0 auto;
}

/* =========================================================
   HERO
========================================================= */

.hero{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:18px;
}

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

.hero-card{
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
  position:relative;
  overflow:hidden;
}

.hero-card:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 280px at 20% 20%,rgba(124,92,255,.25),transparent 55%),
    radial-gradient(520px 280px at 80% 30%,rgba(38,214,160,.18),transparent 55%);
  pointer-events:none;
}

.hero-card>*{position:relative}

.title{
  font-size:26px;
  font-weight:800;
  letter-spacing:.02em;
  margin:0 0 14px;
}

.muted{color:var(--muted)}
.mono{font-family:var(--mono)}

/* =========================================================
   SPEC HEADER LIST
========================================================= */

.spec-list{
  margin-top:12px;
  border-top:1px solid rgba(255,255,255,.10);
  padding-top:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.spec-row{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px 0;
  border-bottom:1px dashed rgba(255,255,255,.12);
}

.spec-row:last-child{border-bottom:none}

.spec-key{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
}

.spec-value{
  font-size:15px;
  font-weight:800;
}

/* =========================================================
   STATUS CARD
========================================================= */

.side-card{
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow2);
}

.side-title{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted2);
  margin-bottom:12px;
}

.kv{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:10px 12px;
  align-items:center;
  font-size:13px;
}

.kv div{
  padding:8px 0;
  border-bottom:1px dashed rgba(255,255,255,.12);
}

.kv div:nth-last-child(-n+2){border-bottom:none}

.kv .k{color:var(--muted)}
.kv .v{font-weight:800}

.callout{
  margin-top:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  padding:12px;
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}

.callout.warn{
  border-color:rgba(255,204,102,.30);
  background:rgba(255,204,102,.06);
}

/* =========================================================
   BODY
========================================================= */

.spec-body{
  margin-top:18px;
  display:grid;
  grid-template-columns:260px 1fr;
  gap:22px;
}

@media (max-width:980px){
  .spec-body{grid-template-columns:1fr}
}

/* =========================================================
   NAV
========================================================= */

.nav{
  align-self:start;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:var(--shadow2);
}

.nav .group{
  margin:6px 0 8px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.40);
  padding:8px 10px;
}

.nav-section{
  margin-top:10px;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.35);
  padding:8px 10px 4px;
}

.nav a{
  display:block;
  padding:8px 10px;
  border-radius:10px;
  font-size:13px;
  text-decoration:none;
  color:var(--muted);
  border:1px solid transparent;
  transition:.12s ease;
}

.nav a:hover{
  color:var(--text);
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.10);
}

/* =========================================================
   CONTENT
========================================================= */

.content{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.card{
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow2);
  scroll-margin-top:96px;
}

.card h2{
  font-size:17px;
  font-weight:700;
  margin:0 0 10px;
}

.sub{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:18px 0 8px;
  color:rgba(255,255,255,.55);
}

/* =========================================================
   TABLE
========================================================= */

.table{
  width:100%;
  border-collapse:collapse;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  overflow:hidden;
}

.table th,
.table td{
  padding:10px;
  font-size:13px;
  text-align:left;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.table th{
  width:220px;
  font-weight:700;
  color:rgba(255,255,255,.65);
  background:rgba(255,255,255,.04);
}

.table td{color:rgba(255,255,255,.78)}

.table tr:last-child td{border-bottom:none}

/* =========================================================
   CODE BLOCK
========================================================= */

.code{
  margin-top:12px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.30);
}

.code-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 14px;
  background:rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:12px;
}

.code-head .left{
  display:flex;
  gap:10px;
  align-items:center;
}

.method{
  font-weight:800;
  letter-spacing:.08em;
  color:var(--accent);
}

.endpoint{
  font-family:var(--mono);
  color:rgba(255,255,255,.70);
}

.code-body{
  background:rgba(0,0,0,.45);
  padding:14px;
}

.code-body pre{
  margin:0;
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1.55;
  color:rgba(255,255,255,.86);
  overflow:auto;
}

/* =========================================================
   NOTE
========================================================= */

.note{
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}

.api-wrap pre{
  background: transparent !important;
  color: rgba(255,255,255,.86) !important;
  border: none !important;
}

.api-wrap .code-body{
  background: rgba(0,0,0,.55);
}

.api-wrap .code-body pre{
  background: transparent !important;
  padding: 0;
}