/* -----------------------------
   Modern dark / Web3-ish theme
   ----------------------------- */

:root{
  --bg0:#05060a;
  --bg1:#0b0d14;
  --card:rgba(255,255,255,0.06);
  --card2:rgba(255,255,255,0.085);
  --stroke:rgba(255,255,255,0.12);
  --stroke2:rgba(255,255,255,0.18);
  --text:#e9ecf5;
  --muted:rgba(233,236,245,0.70);
  --muted2:rgba(233,236,245,0.55);
  --accent:#7c5cff;          /* purple */
  --accent2:#22d3ee;         /* cyan */
  --good:#2dd4bf;
  --warn:#fbbf24;
  --bad:#fb7185;
  --shadow: 0 10px 30px rgba(0,0,0,0.45);
  --radius: 16px;
  --radius2: 12px;
  --pad: 16px;
  --pad2: 12px;
  --fw-regular: 450;
  --fw-semibold: 600;
  --fw-bold: 700;
}

/* Prevent width/padding/border from causing overflow in cards */
*,
*::before,
*::after{
  box-sizing: border-box;
}

html,body{
  margin:0;
  padding:0;
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(124,92,255,0.22), transparent 55%),
    radial-gradient(900px 700px at 85% 20%, rgba(34,211,238,0.14), transparent 50%),
    radial-gradient(900px 800px at 70% 90%, rgba(45,212,191,0.10), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-weight: var(--fw-regular);
  line-height:1.45;
}

/* Center column */
body{
  display:block;
  padding: 28px 16px 44px;
}

body > *{
  box-sizing:border-box;
}

/* Main width */
body > div,
body > section,
body > hr,
body > h1,
body > p.about-link{
  max-width: 980px;
  width: 100%;
  margin-left:auto;
  margin-right:auto;
}

/* Headline */
h1{
  margin: 10px auto 14px;
  padding: 14px 16px;

  /* Vertically center title with avatar */
  display: flex;
  align-items: center;
  gap: 14px;

  font-size: 22px;
  letter-spacing: 0.2px;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  position: relative;
  overflow:hidden;
  line-height: 1.2;
}

h1::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(600px 100px at 15% 0%, rgba(124,92,255,0.35), transparent 60%),
    radial-gradient(400px 120px at 85% 10%, rgba(34,211,238,0.22), transparent 60%);
  filter: blur(10px);
  opacity: 0.9;
  pointer-events:none;
}

h1 > *{ position:relative; }

/* Sections as “glass” cards */
section,
div{
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.05));
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: var(--pad);
  margin: 12px auto;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

/* Don’t style inner layout divs like cards unless they are top-level */
section section,
section div,
div div,
div section{
  background: transparent;
  border: none;
  box-shadow:none;
  backdrop-filter:none;
  padding: 0;
  margin: 0;
  max-width:none;
}

h2{
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--text);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  opacity: 0.95;
}

/* subtle divider */
hr{
  border:none;
  border-top: 1px solid rgba(255,255,255,0.10);
  margin: 14px auto;
}

p, li{
  color: var(--muted);
}

strong, b{
  font-weight: var(--fw-bold);
}

/* Links */
a{
  color: rgba(34,211,238,0.95);
  text-decoration: none;
  border-bottom: 1px solid rgba(34,211,238,0.35);
}
a:hover{
  color: var(--text);
  border-bottom-color: rgba(124,92,255,0.7);
}

/* Inputs */
input[type="text"],
input[type="number"],
select{
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.30);
  color: var(--text);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  margin-top: 2px;
  margin-bottom: 12px;
}

select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(233,236,245,0.75) 50%),
    linear-gradient(135deg, rgba(233,236,245,0.75) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

select:hover{
  border-color: rgba(34,211,238,0.35);
}

select:focus{
  border-color: rgba(124,92,255,0.65);
  box-shadow: 0 0 0 4px rgba(124,92,255,0.18);
}

/* Options list (best-effort; browser/OS dependent) */
select option{
  background: #0b0d14;
  color: var(--text);
}

input::placeholder{ color: rgba(233,236,245,0.45); }

input:focus,
select:focus{
  border-color: rgba(124,92,255,0.65);
  box-shadow: 0 0 0 4px rgba(124,92,255,0.18);
}

label{
  display:block;
  margin: 10px 0 6px;
  font-size: 12px;
  color: var(--muted2);
}

/* Buttons */
button{
  cursor:pointer;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background:
    linear-gradient(180deg, rgba(124,92,255,0.95), rgba(124,92,255,0.70));
  color: white;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.2px;
  box-shadow: 0 8px 18px rgba(124,92,255,0.20);
  transition: transform .08s ease, box-shadow .15s ease, filter .15s ease;
  min-width: 0;
  margin: 10px 10px 0 0;
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  white-space: normal;
}

button:hover{ filter: brightness(1.05); box-shadow: 0 10px 22px rgba(124,92,255,0.26); }
button:active{ transform: translateY(1px); }
button:disabled{ opacity:0.55; cursor:not-allowed; filter:saturate(0.4); }

/* Secondary buttons (opt-in via class) */
button.secondary{
  background: rgba(255,255,255,0.08);
  color: var(--text);
  box-shadow:none;
}
button.secondary:hover{ background: rgba(255,255,255,0.11); }

.icon-button{
  /* Icon-only button (no visible frame) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;   /* <-- prevents growing to full width */
  margin: 0;        /* <-- overrides global button margin */

  width: 30px;
  height: 30px;
  padding: 0;

  background: transparent;
  border: none;
  border-radius: 8px;   /* only for focus/hover background */
  box-shadow: none;

  color: rgba(233,236,245,0.92);
  line-height: 1;

  margin-top: 0;
}

.icon-button:hover{
  background: rgba(255,255,255,0.10);
  filter: none;
}
.icon-button:active{
  transform: translateY(1px);
}

/* PoW success feedback (glow pulse + highlight sweep) */
@keyframes pow-success-pulse {
  0%   { transform: translateY(0) scale(1);   box-shadow: var(--shadow); border-color: rgba(255,255,255,0.12); }
  25%  { transform: translateY(-2px) scale(1.01);
         box-shadow: 0 0 0 6px rgba(34,211,238,0.18), 0 22px 55px rgba(0,0,0,0.62);
         border-color: rgba(34,211,238,0.55); }
  55%  { transform: translateY(-1px) scale(1.01);
         box-shadow: 0 0 0 8px rgba(124,92,255,0.20), 0 26px 70px rgba(0,0,0,0.66);
         border-color: rgba(124,92,255,0.65); }
  100% { transform: translateY(0) scale(1);   box-shadow: var(--shadow); border-color: rgba(255,255,255,0.12); }
}

@keyframes pow-success-overlay {
  0%   { opacity: 0;   transform: translateX(-30%) rotate(-8deg); }
  18%  { opacity: 0.55; }
  55%  { opacity: 0.35; }
  100% { opacity: 0;   transform: translateX(30%) rotate(-8deg); }
}

@keyframes pow-success-credits {
  0%   { box-shadow: none; }
  20%  { box-shadow: 0 0 0 5px rgba(124,92,255,0.22), 0 18px 44px rgba(124,92,255,0.18); }
  60%  { box-shadow: 0 0 0 6px rgba(34,211,238,0.18), 0 18px 44px rgba(34,211,238,0.14); }
  100% { box-shadow: none; }
}

/* Needed for overlay sweep */
#status-panel{
  position: relative;
  overflow: hidden;
}

#status-panel::after{
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(900px 220px at 20% 0%, rgba(34,211,238,0.22), transparent 60%),
    radial-gradient(900px 220px at 80% 0%, rgba(124,92,255,0.22), transparent 60%),
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.10) 30%, transparent 60%);
}

#status-panel.pow-success{
  animation: pow-success-pulse 1.6s ease-in-out;
}

#status-panel.pow-success::after{
  animation: pow-success-overlay 1.6s ease-out;
}

#status-panel.pow-success #credits{
  animation: pow-success-credits 1.6s ease-out;
}

/* Status blocks */
#status,
.section-status{
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.32));
  color: rgba(233,236,245,0.90);
  min-height: 18px;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0.2px;
}

/* Optional semantic variants if these classes are added in JS later */
.section-status.ok{ border-color: rgba(45,212,191,0.35); }
.section-status.warn{ border-color: rgba(251,191,36,0.35); }
.section-status.bad{ border-color: rgba(251,113,133,0.35); }

/* Make mining stats feel less cramped (scope to the status panel only) */
#status-panel #account-info,
#status-panel #address-info{
  margin-top: 12px;
  display: grid;
  gap: 10px;
  font-size: 20px;
  line-height: 1.35;
}

/* Each stat line becomes a pill row (status panel only) */
/* #status-panel #status-address, */
#status-panel #credits,
#earn-section #hashrate,
#earn-section #cooldown-countdown{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}

#earn-section #hashrate,
#signup-hashrate{
  white-space: pre-line;
}

#earn-section #hashrate{
  flex-wrap: wrap;
}

/* Make Credits the primary, most visible metric */
#status-panel #credits{
  background:
    linear-gradient(180deg, rgba(124,92,255,0.14), rgba(255,255,255,0.04));
  box-shadow: 0 10px 24px rgba(124,92,255,0.14);
  font-weight: var(--fw-bold);
  font-size: 22px;
  letter-spacing: 0.2px;
  display: block;
  white-space: pre-line;
}

#status-panel #credits b{
  font-weight: var(--fw-bold);
  text-shadow: 0 2px 14px rgba(124,92,255,0.25);
}

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.35;
  word-break: break-word;
}

#status-panel #status-address{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(233,236,245,0.92);
}
#status-panel #status-address .mono{
  font-size: 12px;
  opacity: 0.95;
}

/* Make the pickaxe clearly visible even on dark backgrounds */
#earn-section #hashrate::before{
  content: "⛏";
  font-size: 1.15em;
  opacity: 0.95;
  filter: drop-shadow(0 2px 10px rgba(34,211,238,0.35));
}

/* Slight emphasis on the numbers (status panel only) */
#status-panel #credits b,
#earn-section #hashrate b{
  color: rgba(233,236,245,0.98);
}

@media (max-width: 640px){
  body{ padding: 18px 12px 34px; }
  h1{ font-size: 20px; }
  .dex-row{ flex-direction: column; }
  .dex-actions{ justify-content:flex-start; }

  #status-panel #account-info,
  #status-panel #address-info{ font-size: 17px; }

  #status-panel #credits{ font-size: 19px; }

  #earn-section #hashrate,
  #earn-section #cooldown-countdown{ padding: 9px 10px; }

  /* Mobile: stack most buttons vertically */
  button{
    width: 100%;
    margin: 12px 0 0 0;
    display: block;
  }

  /* Keep toggle links compact (do not behave like full-width buttons) */
  button.toggle-link{
    width: auto;
    margin: 6px 0 0 0;
    display: inline-flex;
  }

  /* Mobile: stack action buttons too (prevents overflow in narrow cards) */
  .dex-actions{
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .dex-actions button{
    width: 100%;
    margin: 0;
    display: block;
  }

  /* Keep icon-only buttons compact */
  button.icon-button{
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
}

  input[type="text"],
  input[type="number"],
  select{ margin-bottom: 14px; }
}

/* About link */
body > p.about-link{
  max-width: 980px;
  width: 100%;
  margin: 6px auto 16px;
  text-align:right;
}

/* Avatar */
.ab-avatar{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
  box-shadow: 0 10px 22px rgba(0,0,0,0.35);
}

/* ---------------------------
   DEX UI
   --------------------------- */
.dex-grid{
  display:flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
}

.dex-card{
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 14px;
  background: rgba(0,0,0,0.22);
  overflow: hidden; /* keep inner rows inside rounded card */
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.dex-row{
  display:flex;
  gap: 12px;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  margin: 0 0 10px 0;
  background: rgba(255,255,255,0.04);
  max-width: 100%;
  min-width: 0; /* allow flex children to shrink */
}

/* Ensure the left text area can wrap instead of pushing outside the card */
.dex-row > div:first-child{
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 12px;
}

.dex-actions{
  display:flex;
  gap: 8px;
  align-items:center;
  justify-content:flex-end;
  flex: 0 0 auto;
  flex-wrap: wrap;
  min-width: 0;
}

.dex-actions button{
  width:auto;
  padding: 8px 10px;
  margin: 0;
  max-width: 100%;
}

.dex-actions button.dex-icon{
  padding: 8px 10px;
  margin: 0;
}

.dex-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.35;
  white-space: pre-wrap;
  min-width: 0;
  word-break: break-word;
}

@media (max-width: 640px){
  body{ padding: 18px 12px 34px; }
  h1{ font-size: 20px; }
  .dex-row{ flex-direction: column; }
  .dex-actions{ justify-content:flex-start; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* --- Mobile layout fixes: keep buttons inside cards and avoid horizontal overflow --- */
.button-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.button-row button {
  flex: 1 1 180px;
  max-width: 100%;
  box-sizing: border-box;
}

.header-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.header-row h3 {
  flex: 0 0 auto;
}

.header-row small {
  flex: 1 1 220px;
  min-width: 0;
}

.header-row button {
  flex: 0 0 auto;
  margin-left: auto;
  max-width: 100%;
  box-sizing: border-box;
}



@media (max-width: 640px) {
  .button-row {
    flex-direction: column;
    align-items: stretch;
  }

  .button-row button {
    width: 100%;
    flex: 0 0 auto;
  }

  .header-row {
    flex-direction: column;
    align-items: stretch;
  }

  .header-row button {
    width: 100%;
    margin-left: 0;
  }

  .header-row small {
    width: 100%;
    flex: 0 0 auto;
  }
}

/* ---------------------------
   Collapsible “More info” notes
   --------------------------- */
.toggle-row{
  margin-top: 6px;
}

.toggle-link{
  /* Reset default button styles so it looks like a subtle text link */
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
  width: auto;

  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  font: inherit;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.2px;
  color: var(--muted);
  text-decoration: none;
  opacity: 0.9;
}

/* Chevron indicator (collapsed/expanded) */
.toggle-link::after{
  content: "▸";
  opacity: 0.85;
  transform: translateY(1px);
}

.toggle-link[aria-expanded="true"]::after{
  content: "▾";
}

.toggle-link:hover{
  color: var(--text);
}

.toggle-link:hover::after{
  opacity: 1;
}

.toggle-link:focus{ outline: none; }
.toggle-link:focus-visible{
  outline: 2px solid rgba(124,92,255,0.55);
  outline-offset: 3px;
  border-radius: 8px;
}

.toggle-content{
  margin-top: 6px;
  display: none; /* collapsed by default */
}

/* Open state (set by JS via data-open="1").
   NOTE: HTML may contain inline style="display:none"; override deterministically. */
.toggle-content[data-open="1"]{
  display: block !important;
}

/* ---------------------------
   Mobile-only “App feeling” UI
   (hidden on desktop)
   --------------------------- */
@media (max-width: 640px){
  /* Sticky mini top bar */
    /* Sticky mini top bar */
  #mobile-topbar{
    position: sticky;
    top: 0;
    z-index: 999;

    display: none; /* shown only when logged in via JS */
    margin: 0 auto 10px;
    padding: 10px 12px;

    /* Match the main dark glass theme */
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05));
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    overflow: hidden;
    box-sizing: border-box;
  }

  #mobile-topbar::before{
    content:"";
    position:absolute;
    inset:-2px;
    background:
      radial-gradient(600px 120px at 15% 0%, rgba(124,92,255,0.30), transparent 60%),
      radial-gradient(500px 140px at 85% 10%, rgba(34,211,238,0.18), transparent 60%);
    filter: blur(10px);
    opacity: 0.9;
    pointer-events:none;
  }

  #mobile-topbar > *{ position: relative; }

  #mobile-topbar .topbar-earned{
    margin-top: 2px;
    font-size: 11px;
    color: rgba(233,236,245,0.78);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #mobile-topbar .topbar-row{
    display: flex;
    align-items: center;
    gap: 10px;
  }

  #mobile-topbar .topbar-left{
    flex: 1 1 auto;
    min-width: 0;
  }

  #mobile-topbar .topbar-balance{
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #mobile-topbar .topbar-addr{
    margin-top: 2px;
    font-size: 11px;
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #mobile-topbar .topbar-actions{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
  }

  /* Make icon buttons truly compact on mobile */
  #mobile-topbar .icon-button{
    min-width: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Quick actions row (primary actions) */
  #mobile-quick-actions{
    display: none; /* shown only when logged in via JS */
    margin: 0 auto 10px;
  }

  #mobile-quick-actions .qa-row{
    display: flex;
    gap: 10px;
  }

  #mobile-quick-actions .qa-row button{
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    margin: 0;
    padding: 10px 10px;
  }

  /* One-click section chips */
  #mobile-chips{
    display: none; /* shown only when logged in via JS */
    margin: 0 auto 10px;
  }

  #mobile-chips .chip-row{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  #mobile-chips button{
    min-width: 0;
    width: auto;
    margin: 0;
    padding: 6px 10px;
    font-size: 12px;
  }

  /* Small dropdown menu under the gear */
  #mobile-menu{
    display: none;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #808080;
  }

  #mobile-menu a{
    display: inline-block;
    margin-right: 12px;
    font-size: 12px;
  }
}

/* Desktop: never show the mobile UI */
@media (min-width: 641px){
  #mobile-topbar,
  #mobile-quick-actions,
  #mobile-chips{ display: none !important; }
}

.modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;

  /* Hard overrides: prevent global `div` card styling and `body > div` max-width rules
     from turning overlays into centered cards (especially on mobile). */
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100dvh;
  max-width: none !important;
  margin: 0 !important;

  /* Override the global `section, div { ... }` card look */
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;

  background: rgba(0,0,0,0.6) !important;
  padding: 16px;
  box-sizing: border-box;

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

/* If the overlay is a direct child of body, defeat `body > div { max-width: 980px; ... }` */
body > div.modal-overlay{
  max-width: none !important;
  width: 100vw !important;
  margin: 0 !important;
}

/* Safety net: if QR modals are identified by ID, ensure they are not constrained */
#qr-modal,
#qr-scan-modal{
  max-width: none !important;
  width: 100vw !important;
  margin: 0 !important;
}

.modal-card{
  width: min(520px, 100%);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(17,24,39,0.92);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  padding: 14px;
}

.modal-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 10px;
}

.modal-title{
  font-weight: 700;
  font-size: 16px;
}

@media (max-width: 640px){
  /* Mobile: hide the desktop status panel (we already have the sticky top bar) */
  #status-panel,
  #status-panel + hr{
    display: none !important;
  }

  /* Mobile: make QR modals full-screen so the camera/QR is always "where you need it" */
  #qr-modal,
  #qr-scan-modal{
    padding: 0 !important;
  }

  #qr-modal .modal-card,
  #qr-scan-modal .modal-card{
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    border-radius: 0 !important;
    padding: 12px !important;
  }

  #qr-video{
    width: 100% !important;
    height: calc(100vh - 120px) !important;
    object-fit: cover;
    border-radius: 12px;
  }

  #qr-canvas{
    width: min(320px, 100%) !important;
    height: auto !important;
  }
}

/* --- Mobile UI gating (robust against inline styles / partial JS failures) --- */
.mobile-only { display: none; }

@media (max-width: 640px) {
  /* Show the sticky mobile UI only when a private key is present */
  html[data-has-account="1"] #mobile-topbar,
  html[data-has-account="1"] #mobile-quick-actions {
    display: block;
  }

  /* Hide the desktop status block on mobile when logged in */
  html[data-has-account="1"] #desktop-status-block,
  html[data-has-account="1"] #status-panel {
    display: none;
  }
}