:root{
	--bg:#ffffff;
	--muted:#6b7280;
	--accent:#2563eb;
	--border:#e6e7eb;
	--shadow: 0 6px 18px rgba(15,23,42,0.06);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:#0f172a}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.topbar{position:fixed;left:0;right:0;top:0;height:64px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;z-index:40}
.topbar-inner{display:flex;align-items:center;gap:12px;width:100%;padding:0 20px}
.brand{font-weight:700;font-size:18px}

/* left nav area */
.nav{display:flex;align-items:center;gap:12px}
.nav a{margin-left:0;padding:8px 10px;color:var(--muted);text-decoration:none;font-size:14px;border-radius:8px}
.nav a:hover{background:rgba(37,99,235,0.04);color:var(--accent)}

/* language selector */
.lang-select{position:relative;margin-left:8px}
.lang-select button{display:flex;align-items:center;gap:8px;background:none;border:0;color:var(--muted);cursor:pointer;padding:6px 8px;border-radius:8px}
.lang-select button:hover{background:rgba(37,99,235,0.04);color:var(--accent)}
.lang-select .flag{width:18px;height:12px;object-fit:cover;border-radius:2px}

/* language menu */
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 12px 30px rgba(15,23,42,0.08);padding:6px;min-width:160px;display:none}
.lang-option{display:flex;align-items:center;gap:8px;padding:8px 10px;color:var(--muted);cursor:pointer;border-radius:6px}
.lang-option:hover{background:rgba(37,99,235,0.04);color:var(--accent)}

/* modern flag hover */
.lang-flags img.flag-choose {
	border: 1px solid transparent;
	transition: transform .12s ease, box-shadow .12s ease, border-color .12s;
}
.lang-flags img.flag-choose:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 18px rgba(37,99,235,0.12);
	border-color: rgba(37,99,235,0.18);
}

/* currency option buttons (modern) */
.currency-btn{
	min-width:44px;
	padding:6px 8px;
	border-radius:8px;
	border:1px solid rgba(15,23,42,0.06);
	background:#fff;
	color:var(--muted);
	font-weight:700;
	cursor:pointer;
	transition: all .14s ease;
}
.currency-btn:hover{ transform: translateY(-3px); box-shadow:0 10px 24px rgba(37,99,235,0.08); color:var(--accent); }
.currency-btn.active{
	background: linear-gradient(90deg,var(--accent),#7c3aed);
	color:#fff;
	border-color:transparent;
	box-shadow:0 14px 40px rgba(37,99,235,0.14);
}

/* topbar actions (right) */
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:10px}

/* sign-in button */
.top-signin{height:36px;padding:0 14px;border-radius:10px;font-weight:600;font-size:14px;color:var(--accent);background:rgba(37,99,235,0.04);border:1px solid transparent;cursor:pointer}
.top-signin:hover{background:var(--accent);color:#fff}

/* profile button + menu */
.profile{position:relative}
.profile-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:#fff;cursor:pointer}
.profile-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(15,23,42,0.06)}
.profile-avatar{width:20px;height:20px}

/* profile menu */
.profile-menu{position:absolute;right:0;top:44px;width:220px;background:#fff;border-radius:10px;box-shadow:0 14px 40px rgba(15,23,42,0.12);border:1px solid var(--border);overflow:visible;z-index:60;display:none;font-size:14px}
.profile-menu .menu-section{padding:8px 10px;border-bottom:1px solid rgba(15,23,42,0.03)}
.profile-menu .menu-item{display:flex;justify-content:space-between;align-items:center;padding:8px;border-radius:6px;color:var(--muted);cursor:pointer}
.profile-menu .menu-item:hover{background:rgba(37,99,235,0.03);color:var(--accent)}
.menu-footer{display:flex;gap:8px;padding:8px}
.menu-footer .small-btn{
	flex:1;
	padding:8px 10px;
	border-radius:8px;
	border:1px solid var(--border);
	background:#fff;
	color:var(--muted);
	font-weight:600;
	cursor:pointer;
}
.menu-footer .small-btn:hover{ background: #f8fafc; color:var(--accent) }

/* profile-lang-list (internal list that appears when clicking the caret) */
.profile-lang-list {
	display: none;
	position: absolute;
	right: 10px;
	top: calc(100% + 8px);
	margin-top: 8px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 8px;
	box-shadow: 0 12px 30px rgba(15,23,42,0.08);
	min-width: 160px;
	z-index: 1000; /* ensure it sits above the profile-menu */
	overflow: hidden;
}

/* internal list item hover (kept compact) */
.profile-lang-list .lang-option {
	padding: 8px 10px;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--muted);
	cursor: pointer;
}
.profile-lang-list .lang-option:hover {
	background: rgba(37,99,235,0.04);
	color: var(--accent);
}

/* ensure vertical centering of all buttons */
.topbar .topbar-inner > *{display:flex;align-items:center}

/* responsive adjustments */
@media (max-width:900px){
	.main-grid{flex-direction:column;padding-top:90px}
	.left-panel{max-width:none}
	.lang-menu, .profile-menu{right:8px;left:8px}
}

/* ...existing code... */

.main-grid{
	/* keep two-column layout and prevent wrapping on wide screens */
	display:flex;
	gap:30px;
	padding-top:100px;
	padding-bottom:40px;
	align-items:flex-start;
	flex-wrap:nowrap; /* prevent right panel from dropping below */
}

/* left column: fixed width block */
.left-panel{
	/* ensure fixed column width, no shrinking */
	flex: 0 0 360px;
	max-width: 360px;
	background:#fff;
	padding:28px;
	border-radius:12px;
	box-shadow:var(--shadow);
	border:1px solid var(--border);
}

/* right column: flexible, takes remaining space; allow content to shrink properly */
.right-panel{
	flex: 1 1 0%;
	min-width: 0; /* allows flex children (table) to truncate instead of overflowing */
}

/* ensure table card scrolls within column if necessary */
.table-card{
	/* allow internal overflow without breaking layout */
	overflow: auto;
}

/* keep existing responsive behavior (stack columns on small screens) */
@media (max-width:900px){
	.main-grid{flex-direction:column;padding-top:90px}
	.left-panel{max-width:none;flex: 1 1 auto}
	.right-panel{min-width:0}
}

/* ...existing code... */
.sparkline{width:120px;height:36px}

/* left panel h1 */
.left-panel h1 {
	margin-top: 0;
	font-size: 25px; /* reduced from 20px */
}

/* profile language toggle inside profile-menu */
.profile-lang { position: relative; }
.profile-lang .profile-lang-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px;
	border-radius: 6px;
	background: transparent;
	border: 1px solid transparent;
	cursor: pointer;
}
.profile-lang .profile-lang-toggle:hover {
	background: rgba(37,99,235,0.03);
	border-color: rgba(37,99,235,0.06);
}
.profile-lang .current-flag { width:28px; height:18px; border-radius:4px; display:block; }

/* internal language list */
.profile-lang-list .lang-option {
	display:flex;
	align-items:center;
	gap:8px;
	padding:8px 10px;
	color:var(--muted);
	cursor:pointer;
}
.profile-lang-list .lang-option:hover {
	background: rgba(37,99,235,0.04);
	color: var(--accent);
}

/* ensure dropdown doesn't overflow profile-menu on small screens */
@media (max-width:520px){
	.profile-lang-list{left:8px;right:8px;min-width:auto}
}

/* header for tables: title + pagination */
.table-header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	/* prevent title or pagination from wrapping to next line */
	white-space:nowrap;
}

/* ensure title keeps its size and doesn't force wrap */
.table-header h2{
	margin:0;
	font-size:16px;
	flex:0 0 auto;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* pagination container at header right */
.table-header .pagination,
.pagination {
	display:flex;
	align-items:center;
	gap:6px;
	flex:0 0 auto;
	white-space:nowrap;
}

/* numbered page buttons compact styling */
.table-header .pagination button.pg,
.pagination button.pg {
	margin-left:4px;
	padding:4px 6px;
	font-size:12px;
	border-radius:6px;
	border:1px solid #e6e7eb;
	background:#fff;
	cursor:pointer;
}

/* active page button */
.table-header .pagination button.active,
.pagination button.active {
	background: linear-gradient(90deg,var(--accent),#7c3aed);
	color:#fff;
	border-color:transparent;
}

/* smaller page info text */
.table-header .pagination span,
.pagination span {
	font-size:12px;
	color:var(--muted);
}

/* responsive: allow small shrink but keep same-line if possible */
@media (max-width:540px){
	.table-header{ gap:8px; }
	.table-header h2{ font-size:15px; }
	.table-header .pagination button.pg{ padding:4px 5px; font-size:11px; }
}

/* column widths + alignment to ensure headers align with data */
table { table-layout: fixed; }
th:nth-child(1), td:nth-child(1) { width: 48px; text-align: center; }   /* # / rank */
th:nth-child(2), td:nth-child(2) { width: 260px; text-align: left; }    /* Coin / name */
th:nth-child(3), td:nth-child(3) { width: 120px; text-align: right; }   /* Price */
th:nth-child(4), td:nth-child(4) { width: 90px; text-align: right; }    /* 24h */
th:nth-child(5), td:nth-child(5) { width: 140px; text-align: right; }   /* Market Cap */
th:nth-child(6), td:nth-child(6) { width: 100px; text-align: center; }  /* Chart / sparkline */

/* ensure coin cell contents align left inside the second column */
.coin-cell { justify-content: flex-start; }

/* responsive adjustments: let columns shrink proportionally on very small screens */
@media (max-width:720px){
	th:nth-child(1), td:nth-child(1) { width: 40px; }
	th:nth-child(2), td:nth-child(2) { width: 160px; }
	th:nth-child(3), td:nth-child(3) { width: 100px; }
	th:nth-child(4), td:nth-child(4) { width: 70px; }
	th:nth-child(5), td:nth-child(5) { width: 110px; }
	th:nth-child(6), td:nth-child(6) { width: 80px; }
}

/* Modal: sign in */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1200}
.modal-overlay{position:fixed;inset:0;background:rgba(2,6,23,0.6)}
.modal-panel{position:relative;background:#fff;border-radius:12px;padding:18px;width:420px;max-width:92%;box-shadow:0 20px 60px rgba(2,6,23,0.28);z-index:1210;overflow:hidden}
.modal-close{position:absolute;right:10px;top:8px;border:0;background:transparent;font-size:22px;line-height:1;cursor:pointer;color:var(--muted)}
.modal-panel h3{margin:0 0 12px;font-size:18px}

/* Tabs */
.modal-tabs{display:flex;gap:6px;margin-bottom:12px}
.tab-btn{background:#f8fafc;border:1px solid var(--border);padding:6px 10px;border-radius:8px;cursor:pointer;font-weight:600;color:var(--muted)}
.tab-btn.active{background:linear-gradient(90deg,var(--accent),#7c3aed);color:#fff;border-color:transparent;box-shadow:0 8px 24px rgba(37,99,235,0.12)}

/* Modern tab pill styles used in sign-in modal */
.modal-tabs { display:flex; gap:8px; margin-bottom:14px; }
.tab-btn.modern {
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,0.06);
  background: linear-gradient(180deg,#fbfdff,#ffffff);
  color:#475569;
  font-weight:700;
  cursor:pointer;
  transition: all 160ms ease;
  box-shadow: 0 4px 12px rgba(2,6,23,0.04);
}
.tab-btn.modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(37,99,235,0.06);
  color: var(--accent);
  border-color: rgba(37,99,235,0.12);
}
.tab-btn.modern.active {
  background: linear-gradient(90deg,var(--accent),#7c3aed);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(37,99,235,0.14);
}

/* small indicator bar under active tab (accessible when larger panels) */
.tab-btn.modern.active::after {
  content: "";
  display:block;
  height:3px;
  width:100%;
  background: rgba(255,255,255,0.15);
  margin-top:8px;
  border-radius:2px;
}

/* ensure focus outline for keyboard users */
.tab-btn:focus { outline: 2px solid rgba(37,99,235,0.14); outline-offset:2px; }

/* forms */
.signin-form{display:flex;flex-direction:column;gap:10px}
.signin-form label{display:flex;flex-direction:column;font-size:13px;color:#374151}
.signin-form input{margin-top:6px;padding:8px 10px;border-radius:8px;border:1px solid var(--border);font-size:14px}
.form-actions{display:flex;justify-content:flex-end;margin-top:6px}
.btn-primary{background:linear-gradient(90deg,var(--accent),#7c3aed);color:#fff;border:0;padding:8px 14px;border-radius:8px;font-weight:700;cursor:pointer}

/* input with left icon */
.input-icon{
	position:relative;
	display:flex;
	align-items:center;
	gap:8px;
}
.input-icon svg{
	position:relative;
	flex:0 0 16px;
	color:#374151;
	opacity:0.9;
}
.input-icon input{
	width:100%;
	padding:9px 10px 9px 34px; /* left padding to accommodate icon */
	border-radius:8px;
	border:1px solid var(--border);
	font-size:14px;
}

/* position icon absolutely to precisely align on left */
.input-icon svg{
	position:absolute;
	left:10px;
	top:50%;
	transform:translateY(-50%);
	pointer-events:none;
}

/* smaller inputs on compact layouts */
@media (max-width:480px){
	.input-icon input{ padding-left:32px; font-size:14px }
	.input-icon svg{ left:8px }
}

/* XRP drop area (below table) */
.xrp-drop-area{
	position:relative;
	margin-top:14px;
	padding:14px;
	border-radius:12px;
	background: linear-gradient(90deg, rgba(37,99,235,0.03), rgba(124,58,237,0.02));
	border:1px solid rgba(37,99,235,0.06);
	box-shadow: 0 8px 30px rgba(37,99,235,0.03);
	overflow:visible;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
}

.xrp-msg{
	z-index:20;
	display:flex;
	flex-direction:column;
	gap:8px;
	align-items:flex-start;
}
.xrp-msg .xrp-amt{
	background:linear-gradient(90deg,#2563eb,#7c3aed);
	-webkit-background-clip:text; background-clip:text; color:transparent;
	margin-left:6px;
}
.xrp-claim{ min-width:140px; padding:8px 12px; border-radius:10px; border:0; background:linear-gradient(90deg,#2563eb,#7c3aed); color:#fff; font-weight:700; cursor:pointer; }

/* container where coins are appended */
.xrp-drop-container{
	position:absolute;
	inset:0;
	pointer-events:none;
	overflow:visible;
	z-index:10;
}

/* single xrp coin */
.xrp-coin{
	position:absolute;
	will-change: transform, opacity;
	pointer-events:none;
	transform-origin:center;
	animation-name: xrp-fall, xrp-sway;
	animation-timing-function: linear, ease-in-out;
	animation-iteration-count: 1, infinite;
}

/* fall from above to below and fade */
@keyframes xrp-fall {
	from{ transform: translateY(-20vh) translateX(0) rotate(0deg); opacity:0; }
	10%{ opacity:1; }
	100%{ transform: translateY(120vh) translateX(var(--tx,0px)) rotate(360deg); opacity:0.9; }
}
	/* slow oscillation */
@keyframes xrp-sway {
	0%{ transform: rotate(-6deg) }
	50%{ transform: rotate(6deg) }
	100%{ transform: rotate(-6deg) }
}

/* wallet and accumulation styles */
.xrp-drop-area{ position:relative; margin-top:14px; padding:18px; border-radius:12px; background: linear-gradient(90deg, rgba(37,99,235,0.03), rgba(124,58,237,0.02)); border:1px solid rgba(37,99,235,0.06); box-shadow:0 8px 30px rgba(37,99,235,0.03); overflow:visible; display:flex; align-items:center; justify-content:space-between; gap:12px; }

.xrp-wallet{ position:relative; width:160px; height:90px; display:flex; align-items:center; justify-content:center; z-index:20; pointer-events:none; }
.wallet-svg{ display:block; width:100%; height:auto; pointer-events:none; }
.wallet-fill{ position:absolute; bottom:14px; left:18px; right:18px; height:34px; display:flex; align-items:flex-end; gap:6px; overflow:hidden; pointer-events:none; }

/* accumulated coin inside wallet */
.wallet-coin{ width:14px; height:auto; opacity:0; transform-origin:center bottom; animation: wallet-pop .28s ease forwards; margin-left:4px; }
@keyframes wallet-pop { from{ transform: translateY(8px) scale(.6); opacity:0 } to{ transform: translateY(0) scale(1); opacity:1 } }

/* falling coin base style (positioned by JS) */
.xrp-coin{ position:absolute; pointer-events:none; will-change: transform, opacity; z-index:40; }

/* smaller screens */
@media (max-width:720px){ .xrp-drop-area{ padding:10px } .xrp-wallet{ width:120px; height:72px } .wallet-fill{ bottom:10px; height:28px } }

/* inline line: text + inline claim button */
.xrp-line{
	display:flex;
	align-items:center;
	gap:10px;
}
.xrp-line .xrp-line-text{
	font-weight:700;
	font-size:12px;
}
.xrp-claim-inline{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:4px 8px; /* reduzido significativamente */
	height:24px; /* altura fixa menor */
	border-radius:6px; /* reduzido */
	border:0;
	background: linear-gradient(90deg,#2563eb,#7c3aed);
	color:#fff;
	font-weight:600; /* reduzido */
	font-size:11px; /* reduzido */
	line-height:1;
	cursor:pointer;
	box-shadow:0 4px 12px rgba(37,99,235,0.08); /* sombra mais sutil */
	white-space:nowrap;
	min-height:unset; /* remove altura mínima */
}

.xrp-claim-inline:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(37,99,235,0.12);
}

.xrp-line .xrp-line-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 10px;
}

.xrp-drop-area .xrp-claim-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px !important;
    height: 20px !important;
    min-height: 30px !important;
    width: 20px !important;
    margin-left: auto !important; /* força margem à esquerda */
    border-radius: 6px;
    border: 0;
    background: linear-gradient(90deg,#2563eb,#7c3aed);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px !important;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(37,99,235,0.08);
    white-space: nowrap;
    transform: scale(0.9);
    position: absolute;
    right: 14px; /* posiciona à direita */
}

/* Custom XRP Claim Modal */
.custom-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1300;
    font-family: 'Montserrat', sans-serif;
}

.custom-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2,6,23,0.75);
    backdrop-filter: blur(4px);
}

.custom-modal-content {
    position: relative;
    width: 90%;
    max-width: 460px;
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 25px 50px rgba(2,6,23,0.25);
    z-index: 1301;
}

.custom-modal-close {
    position: absolute;
    right: 16px;
    top: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(2,6,23,0.05);
    color: #64748b;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.2s;
}

.custom-modal-close:hover {
    background: rgba(2,6,23,0.1);
    transform: rotate(90deg);
}

.claim-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.claim-xrp-logo {
    width: 48px;
    height: 48px;
}

.claim-header h2 {
    font-size: 24px;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 0;
}

.claim-message {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 24px;
}

.claim-message .highlight {
    color: #2563eb;
    font-weight: 600;
}

.claim-submessage {
    font-size: 14px;
    color: #64748b;
    margin-top: 8px;
}

.custom-input-group {
    position: relative;
    margin-bottom: 16px;
}

.custom-input-group input {
    width: 100%;
    padding: 12px 40px 12px 16px;
    border: 1px solid rgba(2,6,23,0.1);
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    transition: all 0.2s;
}

.custom-input-group input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37,99,235,0.1);
}

.input-icon,
.send-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.send-btn:hover {
    color: #2563eb;
}

.error-message {
    display: none;
    color: #ef4444;
    font-size: 13px;
    margin-top: 12px;
    font-family: 'Montserrat', sans-serif;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Bottombar wrapper (fixed footer) */
.bottombar{
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	z-index:70;
	pointer-events:none; /* allow only inner .xrp-drop-area to be interactive */
	display:flex;
	justify-content:center;
}

/* make the xrp-drop-area act as the interactive footer panel */
.xrp-drop-area.fixed-footer{
	position:relative; /* contained inside .bottombar .container */
	width:100%;
	max-width:1200px;
	margin:0 auto;
	pointer-events:auto; /* allow clicks */
	border-radius:12px 12px 0 0; /* rounded top corners */
	box-shadow: 0 -12px 30px rgba(15,23,42,0.06);
	padding:12px 18px;
	background: linear-gradient(90deg, rgba(37,99,235,0.03), rgba(124,58,237,0.02));
	border:1px solid rgba(37,99,235,0.06);
}

/* Full-width fixed bottom bar */
.xrp-bottombar{
	position:fixed;
	inset:auto 0 0 0; /* bottom:0, left:0, right:0 */
	bottom:0;
	left:0;
	right:0;
	z-index:90;
	pointer-events:auto;
	display:block;
	background:transparent;
}

/* make the xrp-drop-area span full viewport width inside the bottombar */
.xrp-bottombar .xrp-drop-area.fixed-footer{
	position:relative;
	width:100%;
	max-width:none; /* full width */
	margin:0;
	border-radius:0; /* squared edges to fit bottom bar */
	box-shadow: 0 -12px 30px rgba(15,23,42,0.06);
	padding:12px 22px;
	background: linear-gradient(90deg, rgba(37,99,235,0.03), rgba(124,58,237,0.02));
	border-top:1px solid rgba(37,99,235,0.06);
	display:flex;
	align-items:center;
	justify-content:center;
}

/* keep internal layout constrained but allow full-width background */
.xrp-bottombar .xrp-text{ max-width:1200px; width:100%; }

/* ensure the claim button stays interactive on the right */
.xrp-bottombar .xrp-line{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; }
.xrp-bottombar .xrp-claim-inline{ position:relative; margin-left:12px; right:auto; transform:none; }

/* prevent content from being hidden behind footer */
.main-grid{ padding-bottom:120px; } /* adjust if footer height changes */

/* responsive tweaks */
@media (max-width:720px){
	.xrp-bottombar .xrp-drop-area.fixed-footer{ padding:10px 12px; }
	.main-grid{ padding-bottom:160px; }
	.xrp-bottombar .xrp-line{ flex-direction:column; align-items:flex-start; gap:8px; }
	.xrp-bottombar .xrp-claim-inline{ width:100%; margin-left:0; }
}

/* compact footer: reduce vertical size */
.xrp-bottombar .xrp-drop-area.fixed-footer{
	/* smaller vertical padding for a lower profile footer */
	padding:8px 18px;
	box-shadow: 0 -8px 20px rgba(15,23,42,0.05);
}

/* make internal layout slightly more compact */
.xrp-bottombar .xrp-line{ gap:10px; }

/* reduce claim button size inside footer */
.xrp-bottombar .xrp-claim-inline{
	padding:4px 6px;   /* menor espaçamento */
	height:28px;
	min-height:28px;
	font-size:12px;
	width:72px;        /* largura reduzida */
	border-radius:6px;
	line-height:1;
	box-shadow: 0 6px 12px rgba(37,99,235,0.10);
	white-space:nowrap;
}

/* responsive: on narrow screens keep button usable */
@media (max-width:720px){
	.xrp-bottombar .xrp-claim-inline{
		width:100%;      /* full width for touch */
		padding:8px 10px;
		height:36px;
		font-size:13px;
	}
}

/* FORCE compact Claim Now button in bottom bar (high specificity + !important) */
.xrp-bottombar .xrp-drop-area.fixed-footer .xrp-claim-inline{
	box-sizing: border-box !important;
	padding: 4px 6px !important;
	height: 26px !important;
	min-height: 26px !important;
	font-size: 12px !important;
	width: 72px !important;
	max-width: 72px !important;
	border-radius: 6px !important;
	line-height: 1 !important;
	overflow: hidden !important;
	white-space: nowrap !important;
}

/* keep compact but usable on small screens */
@media (max-width:720px){
	.xrp-bottombar .xrp-drop-area.fixed-footer .xrp-claim-inline{
		width: 100% !important;
		padding: 8px 10px !important;
		height: 36px !important;
		font-size: 13px !important;
	}
}

/* Download modal & tutorial styles */
.download-modal{
	position:fixed;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:1400;
	font-family:'Montserrat',sans-serif;
}
.download-modal-overlay{
	position:fixed;
	inset:0;
	background:rgba(2,6,23,0.6);
	backdrop-filter: blur(3px);
}
.download-modal-content{
	position:relative;
	width:92%;
	max-width:520px;
	background:#fff;
	border-radius:12px;
	padding:18px;
	box-shadow:0 30px 60px rgba(2,6,23,0.25);
	z-index:1401;
}
.download-modal-close{
	position:absolute;
	right:12px;
	top:12px;
	border:0;
	background:transparent;
	font-size:22px;
	cursor:pointer;
	color:var(--muted);
}
.download-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.download-xrp{width:48px;height:48px;object-fit:contain}
.download-body .download-note{margin:6px 0 12px;color:var(--muted);font-size:14px}

/* steps list */
.dl-steps{list-style:none;padding:0;margin:0 0 12px;display:flex;gap:12px;justify-content:space-between}
.dl-step{display:flex;flex-direction:column;align-items:center;flex:1;opacity:0.5;transition:opacity .22s}
.dl-step.active{opacity:1}
.dl-step-bullet{width:30px;height:30px;border-radius:50%;background:rgba(37,99,235,0.12);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent);margin-bottom:6px}
.dl-step-text{font-size:12px;text-align:center;color:#334155}

/* progress bar */
.dl-progress{height:8px;background:#eef2ff;border-radius:999px;overflow:hidden;margin-bottom:10px}
.dl-progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),#7c3aed);width:0%;transition:width .5s ease}

/* status text */
.dl-status{font-size:13px;color:var(--muted);min-height:20px}

/* responsive */
@media (max-width:480px){
	.dl-steps{flex-direction:column;gap:8px}
	.dl-step{flex-direction:row;gap:8px;align-items:center}
	.dl-step-bullet{margin-bottom:0}
}
.dl-progress-group {
	display: flex;
	gap: 6px;
	margin-bottom: 10px;
}
.dl-progress-story {
	flex: 1;
	height: 6px;
	background: #eef2ff;
	border-radius: 999px;
	overflow: hidden;
	position: relative;
}
.dl-progress-story-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg,var(--accent),#7c3aed);
	border-radius: 999px;
	transition: width 0s;
}

#signin-modal {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Centraliza o formulário e seus elementos */
#signin-modal form {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

/* Centraliza o container do input e ocupa toda a largura */
#signin-modal .input-icon {
	width: 100%;
	display: flex;
	justify-content: center;
}

/* Input ocupa 90% da largura do container e texto à esquerda */
#signin-modal .input-icon input {
	width: 90%;
	text-align: left;
}

/* Botões ocupam 90% da largura e têm espaçamento superior */
#signin-modal button {
	width: 90%;
	margin-top: 10px;
}