/* app.css — FIXWallet (Bitcoin-themed) by X@Presage0007 */
/* Correctifs majeurs:
   - Modals: overlay + z-index + compat "is-open"/aria-hidden + padding fallback + max-height fallback
   - Status/error: affichage lisible + retours à la ligne (white-space) dans le modal
*/

:root{
  color-scheme: dark;

  --btc:#F7931A;
  --btc2:#FFB23F;
  --btc3:#FFD08A;

  --bg0:#07090D;
  --bg1:#0B0F16;

  --card: rgba(255,255,255,.055);
  --card2: rgba(255,255,255,.075);
  --stroke: rgba(255,255,255,.11);
  --stroke2: rgba(255,255,255,.17);

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --faint: rgba(255,255,255,.54);

  --danger:#FF4D6D;
  --warn:#F7931A;
  --ok:#36E39C;

  --radius: 18px;
  --radius2: 24px;

  --shadow: 0 18px 60px rgba(0,0,0,.52);
  --shadow2: 0 12px 26px rgba(0,0,0,.42);

  --glow: 0 0 0 6px rgba(247,147,26,.16);
  --glow2: 0 18px 60px rgba(247,147,26,.14);

  --nav-h: 64px;
  --page-pad-top: 12px;
  --page-pad-bottom: 44px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

  /* Safe-area aware spacing under fixed navbar */
  padding-top: calc(var(--nav-h) + var(--page-pad-top) + env(safe-area-inset-top));
  padding-bottom: calc(var(--page-pad-bottom) + env(safe-area-inset-bottom));

  background:
    radial-gradient(1200px 700px at 18% -12%, rgba(247,147,26,.18), transparent 55%),
    radial-gradient(900px 600px at 82% 0%, rgba(255,178,63,.10), transparent 60%),
    radial-gradient(780px 520px at 50% 112%, rgba(247,147,26,.09), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));

  position: relative;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 120px);
  opacity:.06;
  mix-blend-mode: overlay;
}
body:after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(600px 360px at 20% 10%, rgba(247,147,26,.10), transparent 60%),
    radial-gradient(540px 380px at 80% 22%, rgba(255,208,138,.06), transparent 62%);
  opacity:.40;
}

/* Better tap behaviour on mobiles */
button, a, input, select, textarea{ -webkit-tap-highlight-color: transparent; }

/* Layout / utilities */
.container{width:100%;max-width:1120px;margin:0 auto;padding:0 18px}
.mt-0{margin-top:0}
.mt-2{margin-top:12px}
.mt-3{margin-top:18px}
.mb-0{margin-bottom:0}
.mb-2{margin-bottom:12px}
.mb-3{margin-bottom:18px}
.pb-0{padding-bottom:0}
.pb-2{padding-bottom:12px}
.pr-1{padding-right:8px}
.pr-3{padding-right:12px}
.w-100{width:100%}

.text-center{text-align:center}
.text-muted{color:var(--muted)}
.text-dark{color:var(--text)}
.text-monospace{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}

.float-md-right{float:right}
@media (max-width: 768px){
  .float-md-right{
    float:none;
    display:flex;
    gap:12px;
    justify-content:flex-end;
    margin-top:10px;
    flex-wrap:wrap;
  }
}

.c-pointer{cursor:pointer}
.disabled{pointer-events:none; opacity:.6}
.d-none{display:none !important}

/* More reliable long-text + newlines (modal status/errors included) */
.break-lines{
  overflow-wrap:anywhere;
  word-break: break-word;
  white-space: pre-wrap;
}
.break-word{word-wrap: break-word; overflow-wrap:anywhere}

@media (max-width: 420px){
  .container{padding:0 14px}
}
@media (max-width: 360px){
  .container{padding:0 12px}
  .mt-3{margin-top:14px}
  .mb-3{margin-bottom:14px}
}

/* Links */
a{color: inherit}
a:focus{outline:none; box-shadow: var(--glow); border-radius: 10px}
a:focus-visible{outline:none; box-shadow: var(--glow); border-radius: 10px}

/* Navbar */
.logo-text { font-size: 24px; font-weight: bold; color: #f69c42; }
.footer-fix { color: #f69c42; font-weight: bold; }
.footer-wallet { color: #ffffff; font-weight: bold; }

.navbar{
  position:fixed; inset:0 0 auto 0;
  height: calc(var(--nav-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);

  display:flex; align-items:center; z-index:1000;
  background: rgba(9,11,15,.70);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.navbar:after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(247,147,26,.55), transparent);
  opacity:.55;
}
.navbar .container{display:flex;align-items:center;justify-content:space-between;gap:16px; min-width:0}

.navbar-brand{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--text);
  font-weight:800;letter-spacing:.2px;
  min-width:0;
}
.navbar-brand img{
  width: clamp(100px, 18vw, 120px);
  height:auto;
  display:block;
}

.navbar-toggler{
  display:none;
  border:1px solid rgba(247,147,26,.26);
  background: rgba(247,147,26,.08);
  color:var(--text);
  border-radius: 12px;
  padding:10px 12px;
  cursor:pointer;
}
.navbar-toggler:hover{border-color: rgba(247,147,26,.38); box-shadow: var(--glow2);}
.navbar-toggler:focus{outline:none; box-shadow: var(--glow);}
.navbar-toggler:focus-visible{outline:none; box-shadow: var(--glow);}
.navbar-toggler-icon{display:block;width:22px;height:14px;position:relative;}
.navbar-toggler-icon:before,.navbar-toggler-icon:after,.navbar-toggler-icon span{
  content:""; position:absolute; left:0; right:0; height:2px;
  background: rgba(255,255,255,.86); border-radius:2px;
}
.navbar-toggler-icon:before{top:0}
.navbar-toggler-icon span{top:6px}
.navbar-toggler-icon:after{bottom:0}

.navbar-collapse{display:flex;align-items:center;justify-content:flex-end;flex:1; min-width:0;}
.navbar-nav{list-style:none;display:flex;align-items:center;gap:8px;padding:0;margin:0}
.nav-item{display:block}

.nav-link{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius: 14px;
  text-decoration:none;color: rgba(255,255,255,.78);
  border:1px solid transparent;
  transition: transform .05s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
  font-weight:700;
  min-height: 44px; /* touch target */
}
.nav-link:hover{
  color: rgba(255,255,255,.95);
  background: rgba(247,147,26,.10);
  border-color: rgba(247,147,26,.22);
  box-shadow: 0 12px 28px rgba(247,147,26,.10);
}
.nav-link:active{transform: translateY(1px)}
.nav-link.active{
  color: rgba(255,255,255,.96);
  background: linear-gradient(135deg, rgba(247,147,26,.18), rgba(255,178,63,.10));
  border-color: rgba(247,147,26,.30);
  box-shadow: 0 10px 30px rgba(247,147,26,.10);
}

/* Mobile navbar */
@media (max-width: 900px){
  .navbar-toggler{display:block}
  .navbar-collapse{
    position:fixed;
    top: calc(var(--nav-h) + env(safe-area-inset-top));
    left:0; right:0;

    background: rgba(9,11,15,.92);
    border-bottom: 1px solid rgba(255,255,255,.10);
    padding: 12px 18px 18px;
    display:none;
    z-index: 1100;
  }
  .navbar-collapse.is-open{display:block}
  .navbar-nav{flex-direction:column;align-items:stretch;gap:10px}
  .nav-link{justify-content:space-between; width:100%}
}

/* Router */
.router-page{display:none;}
.router-page > .container{padding-top: 18px}

/* Cards */
.card{
  background:
    radial-gradient(800px 350px at 12% 0%, rgba(247,147,26,.09), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card-header{
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.card-body{padding: 16px}
.card-footer{
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
@media (max-width: 420px){
  .card-header,.card-body,.card-footer{padding: 14px}
}

/* Tabs */
.nav{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0;list-style:none}
.nav-tabs{
  background: rgba(255,255,255,.03);
  padding:8px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10)
}
.nav-tabs .nav-link{
  border:none;
  background: transparent;
  color: rgba(255,255,255,.74);
  padding: 10px 12px;
  border-radius: 14px;
  min-height: 44px;
}
.nav-tabs .nav-link:hover{
  background: rgba(247,147,26,.10);
  border: 1px solid rgba(247,147,26,.18)
}
.nav-tabs .nav-link.active{
  background: linear-gradient(135deg, rgba(247,147,26,.22), rgba(255,178,63,.12));
  color: rgba(255,255,255,.96);
  border: 1px solid rgba(247,147,26,.30);
  box-shadow: 0 12px 26px rgba(247,147,26,.10);
}
@media (max-width: 520px){
  .nav-tabs{gap:8px}
  .nav-tabs .nav-link{width:100%;justify-content:center}
}

/* Forms */
label{display:block;font-size: 13px;color: var(--muted);margin-bottom:8px}
.form-control,.custom-select,textarea.form-control{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(10,12,18,.62), rgba(8,10,14,.52));
  color: var(--text);
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
textarea.form-control{min-height: 120px; resize: vertical}
.form-control:focus,.custom-select:focus,textarea.form-control:focus{
  border-color: rgba(247,147,26,.42);
  box-shadow: var(--glow);
  background: linear-gradient(180deg, rgba(10,12,18,.70), rgba(8,10,14,.58));
}
.form-control[readonly]{opacity:.92}
::placeholder{color: rgba(255,255,255,.45)}

.custom-select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.72) 50%),
    linear-gradient(135deg, rgba(255,255,255,.72) 50%, transparent 50%),
    linear-gradient(180deg, rgba(10,12,18,.62), rgba(8,10,14,.52));
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%,
    0 0;
  background-size: 6px 6px, 6px 6px, 100% 100%;
  background-repeat:no-repeat;
  padding-right: 36px;
}
.custom-select option{background-color: #0B0F16; color: rgba(255,255,255,.92);}

/* Input groups */
.input-group{display:flex; gap:10px; align-items:stretch;}
.input-group-append{display:flex}
.input-group .form-control{flex: 1; min-width:0;}
@media (max-width: 720px){
  .input-group{flex-direction:column}
  .input-group-append{width:100%}
}

/* Buttons */
.btn{
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight: 800;
  letter-spacing: .2px;
  cursor:pointer;
  transition: transform .05s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, filter .15s ease;
  text-decoration:none;
  min-height: 44px; /* touch target */
}
.btn:hover{
  background: rgba(247,147,26,.10);
  border-color: rgba(247,147,26,.24);
  box-shadow: 0 14px 36px rgba(247,147,26,.10);
}
.btn:active{transform: translateY(1px)}
.btn:focus{outline:none; box-shadow: var(--glow);}
.btn:focus-visible{outline:none; box-shadow: var(--glow);}
.btn-block{width:100%}

.btn-primary{
  background: linear-gradient(135deg, rgba(247,147,26,.98), rgba(255,178,63,.92));
  border-color: rgba(255,255,255,.16);
  color: rgba(10,12,20,.95);
  box-shadow: 0 20px 50px rgba(247,147,26,.18);
}
.btn-primary:hover{filter: brightness(1.05) saturate(1.08); box-shadow: 0 22px 60px rgba(247,147,26,.22);}

.btn-danger{background: rgba(255,77,109,.14); border-color: rgba(255,77,109,.32);}
.btn-danger:hover{background: rgba(255,77,109,.18); border-color: rgba(255,77,109,.38); box-shadow: 0 18px 40px rgba(255,77,109,.12);}

.btn-outline-dark{background: transparent; border-color: rgba(255,255,255,.18);}
.btn-outline-dark:hover{background: rgba(247,147,26,.08); border-color: rgba(247,147,26,.22); box-shadow: 0 14px 34px rgba(247,147,26,.10);}

.btn-outline-danger{background: transparent; border-color: rgba(255,77,109,.35); color: rgba(255,255,255,.92);}
.btn-outline-danger:hover{background: rgba(255,77,109,.14); border-color: rgba(255,77,109,.48); box-shadow: 0 14px 34px rgba(255,77,109,.12);}

.b-width{min-width:120px}
@media (max-width: 720px){ .b-width{min-width: 100%} }

/* Icon buttons */
.btn-icon{
  padding: 10px 12px;
  min-width: 44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 16px;
  line-height: 1;
  gap: 8px;
  white-space: nowrap;
}

/* Alerts */
.alert{
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(247,147,26,.10);
  color: rgba(255,255,255,.92);
  box-shadow: var(--shadow2);
}
.alert-warning{border-color: rgba(247,147,26,.26)}

/* =========================
   Modals (incl. Scan)
   ========================= */

/* Base modal */
.modal{
  position: fixed; inset: 0;
  display:none; align-items: center; justify-content: center;

  /* Fallback padding for browsers w/o max()/env() support */
  padding: 18px;

  /* Safe area padding for iOS (overrides fallback when supported) */
  padding:
    max(18px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));

  background: rgba(0,0,0,.62);
  z-index: 5000;

  /* Prevent scroll chaining under the modal */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Open states (compat with main.js / custom openModal) */
.modal.show,
.modal.is-open,
.modal[aria-hidden="false"]{
  display:flex !important;
}

/* Dedicated overlay element inside modal (your HTML has .modal-overlay) */
.modal .modal-overlay{
  position:absolute;
  inset:0;
  background: transparent; /* keep the modal's own background */
  z-index: 0;
  pointer-events:auto;
}

/* Dialog must stay above overlay */
.modal-dialog{
  width:100%;
  max-width: 640px;
  position: relative;
  z-index: 1;
}
@media (max-width: 520px){
  .modal-dialog{ max-width: 100%; }
}

.modal-content{
  width:100%;
  background:
    radial-gradient(900px 360px at 20% 0%, rgba(247,147,26,.12), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  box-shadow: var(--shadow);
  overflow:hidden;
  position: relative;
  z-index: 1;
}
@media (max-width: 420px){
  .modal-content{ border-radius: 18px; }
}

.modal-header{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  display:flex;align-items:center;justify-content:space-between;
  position: relative;
  z-index: 10;
}
.modal-title{margin:0; font-size: 16px}

.close{
  border:none;background: transparent;color: rgba(255,255,255,.80);
  font-size: 24px;cursor:pointer;padding: 6px 10px;border-radius: 12px;
  position: relative;
  z-index: 20;
  pointer-events: auto;
}
.close:hover{background: rgba(247,147,26,.10); color: rgba(255,255,255,.96); box-shadow: 0 12px 30px rgba(247,147,26,.10);}

/* Body scroll area: add fallback for browsers without min()/svh */
.modal-body{
  padding: 16px;

  max-height: calc(100vh - 160px); /* fallback */
  max-height: calc(min(100vh, 100svh) - 160px);

  overflow:auto;
  position: relative;
  z-index: 1;
}
@media (max-width: 420px){
  .modal-body{
    padding: 14px;
    max-height: calc(100vh - 150px); /* fallback */
    max-height: calc(min(100vh, 100svh) - 150px);
  }
}

.modal-footer{
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;gap:12px;flex-wrap:wrap;
}
.modal-footer .btn{flex:1}

/* Ensure send status/errors are always readable and keep newlines */
#status-screen{
  border-radius: 18px;
}
#status-screen > span{
  display:block;
  white-space: pre-wrap;
  overflow-wrap:anywhere;
  word-break: break-word;
  font-weight: 900;
  letter-spacing: .15px;
}
#status-screen .extra-info{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  color: rgba(255,255,255,.76);
  white-space: pre-wrap;
  overflow-wrap:anywhere;
  word-break: break-word;
  font-size: 13px;
  line-height: 1.35;
}

/* Optional semantic states (harmless if not used by JS) */
#status-screen.is-error > span{ color: rgba(255,77,109,.96); }
#status-screen.is-ok > span{ color: rgba(54,227,156,.96); }
#status-screen.is-warn > span{ color: rgba(247,147,26,.96); }

/* Backdrop compatibility: NEVER block clicks (some scripts inject it) */
.modal-backdrop{
  position:fixed;
  inset:0;
  background: transparent;
  z-index: 4990;
  pointer-events: none;
}

/* Scan modal media */
#scan-video{
  width:100%;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  display:block;
  position: relative;
  z-index: 1;
}
#scan-canvas{
  width:100%;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  display:block;
  position: relative;
  z-index: 1;
}

/* Footer */
.disclaimer{margin-top: 8px}
footer{padding: 18px 0}
footer .container{color: rgba(255,255,255,.55)}

/* Toast */
.toast{
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  pointer-events:none;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(247,147,26,.28);
  background: rgba(9,11,15,.80);
  backdrop-filter: blur(12px);
  color: rgba(255,255,255,.92);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  transition: opacity .18s ease, transform .18s ease;
  font-weight: 800;
  letter-spacing: .2px;
  z-index: 3000;
}
.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =========================
   Wallet — Dashboard
   ========================= */

.wallet-dashboard{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 980px){
  .wallet-dashboard{ grid-template-columns: 1fr; }
}

/* Right column wrapper */
.wallet-right{
  display:flex;
  flex-direction:column;
  gap: 14px;
  min-width:0;
}
.wallet-right .wallet-panel + .wallet-right-stack{ margin-top: 0; }

/* This must NOT look like a big container */
.wallet-right-stack{
  display:block;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  min-width:0;
}

/* Panels */
.wallet-panel{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(720px 280px at 20% 0%, rgba(247,147,26,.08), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow2);
  padding: 14px;
  overflow: hidden;
}

.panel-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  min-width:0;
}
.panel-title{ display:flex; align-items:center; gap:10px; min-width:0; }
.panel-title strong{ font-weight: 950; letter-spacing:.2px; }
.panel-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* Small pill used for MAINNET (FIX) */
.pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(247,147,26,.22);
  background: rgba(247,147,26,.10);
  color: rgba(255,255,255,.88);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .38px;
  white-space: nowrap;
}

/* Receive panel centering */
.wallet-receive-centered{ text-align:center; }
.wallet-receive-centered .qr-code{justify-content:center}
.wallet-receive-centered .wallet-address{margin-left:auto;margin-right:auto}
.wallet-receive-centered .wallet-actions{justify-content:center}
@media (max-width: 720px){
  .wallet-receive-centered .wallet-actions{justify-content:stretch}
}

/* QR */
.qr-code{display:flex;justify-content:center;padding: 10px 0 6px;}
.qr-code img,
.qr-code canvas{
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  padding: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(247,147,26,.18);
  box-shadow: 0 18px 45px rgba(0,0,0,.40);
  display:block;
  margin: 0 auto;
}

/* Address */
.wallet-address{
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.25;
  margin-top: 6px;
  word-break: break-word;
  overflow-wrap:anywhere;
}
@media (max-width: 360px){
  .wallet-address{ font-size: 13px; }
}

/* Action buttons under address */
.wallet-actions{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 12px;
}
@media (max-width: 720px){
  .wallet-actions .btn{ width:100%; }
}

.wallet-hint{ margin-top: 10px; }

/* Balance pill */
.wallet-balance{
  display:inline-flex;
  align-items:baseline;
  gap:10px;
  margin-top: 6px;
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(247,147,26,.12), rgba(255,178,63,.06));
  border: 1px solid rgba(247,147,26,.22);
  box-shadow: 0 12px 30px rgba(247,147,26,.08);
  user-select: none;
  -webkit-user-select: none;
  max-width: 100%;
}
.wallet-balance .amount{font-size: 26px}
.wallet-balance .ticker{font-size: 14px;color: var(--muted);font-weight:800;letter-spacing:.35px}
.balance-small .amount{font-size: 16px}
.balance-small .ticker{font-size: 12px}
@media (max-width: 360px){
  .wallet-balance{ padding: 10px 12px; }
  .wallet-balance .amount{ font-size: 22px; }
}

/* Balance breakdown */
.wallet-breakdown{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.wallet-breakdown .text-monospace{
  font-weight: 900;
  letter-spacing: .2px;
}

/* Backup checkbox */
.wallet-backup{
  margin-top: 14px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.wallet-right-stack .wallet-backup{ margin-top: 0; }
.wallet-backup-compact{ margin-top: 12px; }

.wallet-backup-label{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  margin: 0 0 6px 0;
  font-weight: 900;
  color: rgba(255,255,255,.90);
  line-height: 1.25;
}
#wallet-backup-ok{
  width: 18px;
  height: 18px;
  accent-color: var(--btc);
  margin-top: 2px;
}

/* Meta grid */
.wallet-meta-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.wallet-right-stack .wallet-meta-grid{ margin-top: 12px; }

@media (max-width: 980px){
  .wallet-meta-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 540px){
  .wallet-meta-grid{ grid-template-columns: 1fr; }
}

.wallet-meta-grid-inpanel{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px){
  .wallet-meta-grid-inpanel{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 540px){
  .wallet-meta-grid-inpanel{ grid-template-columns: 1fr; }
}

.wallet-meta-item{
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(540px 220px at 20% 0%, rgba(247,147,26,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow2);
  min-width: 0;
}
.wallet-meta-label{
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .28px;
  margin-bottom: 6px;
}
.wallet-meta-value{
  font-weight: 900;
  color: rgba(255,255,255,.92);
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Backend status pill */
.status-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.status-pill:before{
  content:"";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.30);
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
}
.status-up{ color: rgba(54,227,156,.95); }
.status-up:before{ background: var(--ok); box-shadow: 0 0 0 4px rgba(54,227,156,.12); }
.status-down{ color: rgba(255,77,109,.95); }
.status-down:before{ background: var(--danger); box-shadow: 0 0 0 4px rgba(255,77,109,.12); }
.status-unknown{ color: rgba(255,255,255,.85); }

/* Security tips */
.wallet-tips{
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  padding: 8px 12px;
}
.wallet-tips summary{
  cursor:pointer;
  font-weight: 900;
  color: rgba(255,255,255,.90);
  list-style: none;
}
.wallet-tips summary::-webkit-details-marker{ display:none; }
.wallet-tips summary:after{
  content:"";
  display:inline-block;
  width: 10px;
  height: 10px;
  margin-left: 10px;
  border-right: 2px solid rgba(255,255,255,.65);
  border-bottom: 2px solid rgba(255,255,255,.65);
  transform: rotate(-45deg);
  transition: transform .15s ease;
  opacity: .9;
}
.wallet-tips[open] summary:after{ transform: rotate(45deg); }
.wallet-tips ul{ margin: 10px 0 6px; padding-left: 18px; }
.wallet-tips li{ margin: 6px 0; color: var(--muted); }

/* Recent activity */
.wallet-recent{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.wallet-recent-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.wallet-recent-head strong{ font-weight: 950; letter-spacing:.2px; }
@media (max-width: 520px){
  .wallet-recent-head{ flex-direction: column; align-items: stretch; }
  .wallet-recent-head .btn{ width:100%; }
}

/* Filters row */
.wallet-recent-filters{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 980px){
  .wallet-recent-filters{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .wallet-recent-filters{ grid-template-columns: 1fr; }
}

/* List container */
.wallet-recent-list{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  overflow:hidden;
  background: rgba(255,255,255,.03);
  padding: 10px 12px;
}
.wallet-recent-list .wallet-tx-row,
.wallet-recent-list .wallet-tx-details{ padding-left: 0; padding-right: 0; }
.wallet-recent-list .wallet-tx-row{ border-top-color: rgba(255,255,255,.08); }

/* Tx rows */
.wallet-tx-row{
  display:grid;
  grid-template-columns: 140px 1fr 160px 56px;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  align-items:center;
}
.wallet-tx-row:first-child{ border-top:none; }

.tx-time{ font-size: 12px; color: var(--muted); white-space: nowrap; }
.tx-main{ min-width:0; }
.tx-main a{
  text-decoration:none;
  color: rgba(255,255,255,.92);
  font-weight: 900;
}
.tx-main a:hover{ text-decoration: underline; }

.tx-sub{
  margin-top: 4px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  font-size: 12px;
  color: rgba(255,255,255,.70);
}

.tx-tag{
  display:inline-flex;
  align-items:center;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  font-weight: 900;
  letter-spacing:.2px;
}
.tx-tag.in{ border-color: rgba(54,227,156,.25); background: rgba(54,227,156,.10); color: rgba(54,227,156,.95); }
.tx-tag.out{ border-color: rgba(255,77,109,.25); background: rgba(255,77,109,.10); color: rgba(255,77,109,.95); }

.tx-amt{
  text-align:right;
  font-weight: 950;
  letter-spacing:.2px;
}
.tx-amt.in{ color: rgba(54,227,156,.95); }
.tx-amt.out{ color: rgba(255,77,109,.95); }

.tx-actions{ display:flex; justify-content:flex-end; }
.tx-expand{ min-width: 44px; padding: 10px 12px; }

/* Expanded details */
.wallet-tx-details{
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.10);
}
.wallet-tx-details .k{
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing:.2px;
}
.wallet-tx-details .v{
  font-weight: 900;
  word-break: break-word;
  overflow-wrap:anywhere;
}
.wallet-tx-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}

/* Collapse layout on small screens */
@media (max-width: 720px){
  .wallet-tx-row{ grid-template-columns: 1fr; }
  .tx-amt{ text-align:left; }
  .tx-actions{ justify-content:flex-start; }
  .wallet-tx-grid{ grid-template-columns: 1fr; }
}

/* Pagination bar */
.wallet-recent-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-top: 12px;
  flex-wrap:wrap;
}
.wallet-recent-page{ font-size: 12px; }
@media (max-width: 720px){
  .wallet-recent-pagination .btn{ flex:1; }
  .wallet-recent-page{ width:100%; text-align:center; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior: auto !important; }
}