/* ==========================================================================
   Tiampay UI — premium design system
   Single source of truth for the user-facing area.
   Ported from the approved home_v2 landing design and extended to theme
   the existing Bootstrap 4 markup used across every user view.
   ========================================================================== */

:root{
	--tp-ink:#10141A;
	--tp-ink-soft:#4A5160;
	--tp-ink-faint:#8A90A0;
	--tp-paper:#FFFFFF;
	--tp-mist:#F5F6F8;
	--tp-mist-2:#EEF0F4;
	--tp-line:#E6E8EC;
	--tp-indigo:#3452FF;
	--tp-indigo-deep:#243AD1;
	--tp-emerald:#0FA968;
	--tp-emerald-soft:#E7F6EF;
	--tp-amber:#B7791F;
	--tp-amber-soft:#FDF3E1;
	--tp-red:#D64545;
	--tp-red-soft:#FBEAEA;
	--tp-info-soft:#EEF1FF;

	--tp-radius-sm:8px;
	--tp-radius:12px;
	--tp-radius-lg:16px;
	--tp-shadow-sm:0 1px 2px rgba(16,20,26,0.04), 0 1px 3px rgba(16,20,26,0.06);
	--tp-shadow:0 10px 30px -12px rgba(16,20,26,0.18);
	--tp-shadow-lg:0 24px 60px -20px rgba(16,20,26,0.28);

	--tp-font-display:'Space Grotesk', sans-serif;
	--tp-font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--tp-font-mono:'IBM Plex Mono', monospace;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
	font-family:var(--tp-font-body);
	background:var(--tp-paper);
	color:var(--tp-ink);
	font-size:15px;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	min-height:100vh;
	display:flex;
	flex-direction:column;
}
a{ color:var(--tp-indigo); text-decoration:none; }
a:hover{ color:var(--tp-indigo-deep); }
h1,h2,h3,h4,h5,h6{ font-family:var(--tp-font-display); color:var(--tp-ink); letter-spacing:-0.01em; }
hr{ border:none; border-top:1px solid var(--tp-line); margin:1.5rem 0; max-width:100%; }
code,pre{ font-family:var(--tp-font-mono); }

/* container tightened to the landing width */
.container{ max-width:1080px; }

/* Sticky-footer scaffolding: main content grows, footer sits at the bottom */
body > .container,
body > .tp-page{ flex:1 0 auto; width:100%; }
body > .container{ padding-top:40px; padding-bottom:56px; }

/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar.menu{
	background:var(--tp-paper) !important;
	border-bottom:1px solid var(--tp-line);
	padding:14px 24px;
	box-shadow:none;
}
.navbar.menu .navbar-brand{
	font-family:var(--tp-font-display);
	font-weight:700;
	font-size:1.28rem;
	letter-spacing:-0.02em;
	color:var(--tp-ink);
}
.navbar.menu .navbar-brand:hover{ color:var(--tp-ink); }
.navbar.menu .nav-link{
	font-family:var(--tp-font-body);
	font-weight:500;
	font-size:.92rem;
	color:var(--tp-ink-soft) !important;
	padding:.4rem .85rem !important;
	border-radius:var(--tp-radius-sm);
	transition:color .15s ease, background .15s ease;
}
.navbar.menu .nav-link:hover{ color:var(--tp-ink) !important; background:var(--tp-mist); }
.navbar.menu .nav-link i{ font-size:.85em; margin-right:5px; opacity:.75; }
.navbar.menu .dropdown-toggle{
	font-weight:600; color:var(--tp-ink) !important;
	border:1px solid var(--tp-line); border-radius:var(--tp-radius-sm);
}
.navbar.menu .dropdown-menu{
	border:1px solid var(--tp-line); border-radius:var(--tp-radius);
	box-shadow:var(--tp-shadow); padding:6px; margin-top:8px;
}
.navbar.menu .dropdown-item{
	font-size:.9rem; font-weight:500; color:var(--tp-ink-soft);
	border-radius:var(--tp-radius-sm); padding:.5rem .75rem;
}
.navbar.menu .dropdown-item:hover{ background:var(--tp-mist); color:var(--tp-ink); }
.navbar-toggler{ border:1px solid var(--tp-line); border-radius:var(--tp-radius-sm); }

/* ==========================================================================
   Page header (reusable heading block for interior pages)
   ========================================================================== */
.tp-page-head{ margin-bottom:26px; }
.tp-page-head .tp-eyebrow{ margin-bottom:12px; }
.tp-page-head h1{
	font-weight:700; font-size:clamp(1.5rem, 3vw, 2rem);
	line-height:1.1; margin:0 0 6px;
}
.tp-page-head p{ color:var(--tp-ink-soft); margin:0; font-size:.98rem; }

.tp-eyebrow{
	font-family:var(--tp-font-mono);
	font-size:12px; letter-spacing:.14em; text-transform:uppercase;
	color:var(--tp-ink-soft); display:inline-block;
}
.tp-eyebrow::before{
	content:''; display:inline-block; width:7px; height:7px; border-radius:50%;
	background:var(--tp-emerald); margin-right:9px; position:relative; top:-1px;
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card{
	background:var(--tp-paper);
	border:1px solid var(--tp-line);
	border-radius:var(--tp-radius-lg);
	box-shadow:var(--tp-shadow-sm);
	margin-top:0;
	margin-bottom:24px;
	overflow:hidden;
}
.card-header{
	background:var(--tp-paper);
	border-bottom:1px solid var(--tp-line);
	font-family:var(--tp-font-display);
	font-weight:600;
	font-size:1rem;
	color:var(--tp-ink);
	padding:18px 22px;
}
.card-body{ padding:22px; }
.card-body > *:last-child{ margin-bottom:0; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
	font-family:var(--tp-font-body);
	font-weight:600;
	font-size:.92rem;
	border-radius:var(--tp-radius-sm);
	padding:10px 18px;
	border:1px solid transparent;
	transition:background .15s ease, border-color .15s ease, transform .15s ease, color .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn-sm{ padding:6px 12px; font-size:.82rem; border-radius:7px; }
.btn-lg{ padding:14px 26px; font-size:1rem; }

.btn-primary,
.btn-success{ background:var(--tp-ink); border-color:var(--tp-ink); color:#fff; }
.btn-primary:hover,
.btn-success:hover{ background:var(--tp-indigo-deep); border-color:var(--tp-indigo-deep); color:#fff; }

.btn-info{ background:var(--tp-indigo); border-color:var(--tp-indigo); color:#fff; }
.btn-info:hover{ background:var(--tp-indigo-deep); border-color:var(--tp-indigo-deep); color:#fff; }

.btn-warning{ background:var(--tp-amber-soft); border-color:#F0D9A8; color:var(--tp-amber); }
.btn-warning:hover{ background:#F7E9C8; border-color:#EBCB8A; color:var(--tp-amber); }

.btn-danger{ background:var(--tp-red-soft); border-color:#F1C9C9; color:var(--tp-red); }
.btn-danger:hover{ background:#F7DADA; border-color:#EBB4B4; color:var(--tp-red); }

.btn-light,
.btn-outline-secondary{
	background:var(--tp-paper); border-color:var(--tp-line); color:var(--tp-ink);
}
.btn-light:hover,
.btn-outline-secondary:hover{ background:var(--tp-mist); border-color:var(--tp-line); color:var(--tp-ink); }

/* full-width auth submit helper */
.tp-btn-block{ width:100%; }

/* quiet text link with underline (hero secondary action) */
.tp-link-quiet{
	font-family:var(--tp-font-body); font-weight:600; font-size:.95rem;
	color:var(--tp-ink); border-bottom:1.5px solid var(--tp-line);
	padding-bottom:2px; transition:border-color .15s ease;
}
.tp-link-quiet:hover{ color:var(--tp-ink); border-color:var(--tp-ink); }

/* ==========================================================================
   Forms
   ========================================================================== */
label,.control-label{
	font-family:var(--tp-font-body);
	font-weight:500;
	font-size:.85rem;
	color:var(--tp-ink-soft);
	margin-bottom:.4rem;
}
.form-control{
	border:1px solid var(--tp-line);
	border-radius:var(--tp-radius-sm);
	padding:11px 13px;
	font-size:.93rem;
	color:var(--tp-ink);
	background:var(--tp-paper);
	height:auto;
	transition:border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus{
	border-color:var(--tp-indigo);
	box-shadow:0 0 0 3px rgba(52,82,255,0.12);
	outline:none;
}
.form-control::placeholder{ color:var(--tp-ink-faint); }
.form-text{ font-size:.8rem; color:var(--tp-ink-faint); }
.form-group{ margin-bottom:18px; }

/* ==========================================================================
   Tables
   ========================================================================== */
.table{ color:var(--tp-ink); margin-bottom:0; font-size:.9rem; }
.table thead th{
	border-bottom:1px solid var(--tp-line);
	border-top:none;
	font-family:var(--tp-font-body);
	font-weight:600;
	font-size:.74rem;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--tp-ink-faint);
	padding:12px 14px;
}
.table td{
	border-top:1px solid var(--tp-line);
	padding:13px 14px;
	vertical-align:middle;
	color:var(--tp-ink-soft);
}
.table td strong{ color:var(--tp-ink); }
.table-striped tbody tr:nth-of-type(odd){ background:var(--tp-mist); }
.table-responsive{ border-radius:var(--tp-radius); }

/* ==========================================================================
   Alerts
   ========================================================================== */
.alert{
	border:1px solid transparent;
	border-radius:var(--tp-radius);
	padding:13px 16px;
	font-size:.9rem;
	margin-bottom:20px;
}
.alert-success{ background:var(--tp-emerald-soft); border-color:#BFE7D3; color:#0B7A4B; }
.alert-info,
.alert-primary{ background:var(--tp-info-soft); border-color:#CFD8FF; color:var(--tp-indigo-deep); }
.alert-warning{ background:var(--tp-amber-soft); border-color:#F0D9A8; color:var(--tp-amber); }
.alert-danger{ background:var(--tp-red-soft); border-color:#F1C9C9; color:var(--tp-red); }
.alert-secondary{ background:var(--tp-mist); border-color:var(--tp-line); color:var(--tp-ink-soft); }

/* ==========================================================================
   Tabs (auth card)
   ========================================================================== */
.nav-tabs{ border-bottom:1px solid var(--tp-line); }
.nav-tabs .nav-link{
	border:none;
	color:var(--tp-ink-soft);
	font-family:var(--tp-font-body);
	font-weight:600;
	font-size:.9rem;
	padding:16px 18px;
	border-radius:0;
	background:transparent;
}
.nav-tabs .nav-link:hover{ color:var(--tp-ink); border:none; }
.nav-tabs .nav-link.active{
	color:var(--tp-ink);
	background:transparent;
	border:none;
	box-shadow:inset 0 -2px 0 var(--tp-ink);
}

/* ==========================================================================
   Code / docs
   ========================================================================== */
pre{
	background:var(--tp-ink);
	color:#E8EAF0;
	border-radius:var(--tp-radius);
	padding:16px 18px;
	overflow-x:auto;
	font-size:.84rem;
	line-height:1.55;
	margin-bottom:20px;
}
pre code{ color:inherit; background:none; padding:0; }
code{
	background:var(--tp-mist);
	color:var(--tp-indigo-deep);
	padding:2px 6px;
	border-radius:5px;
	font-size:.85em;
}

/* ==========================================================================
   Reusable layout pieces
   ========================================================================== */
.tp-page{ background:var(--tp-paper); color:var(--tp-ink); }

/* Hero (landing) */
.tp-hero{
	max-width:1080px; margin:0 auto;
	padding:96px 24px 72px;
	display:grid;
	grid-template-columns:1.1fr 0.9fr;
	gap:64px;
	align-items:center;
}
.tp-headline{
	font-weight:700;
	font-size:clamp(2.2rem, 4vw, 3.2rem);
	line-height:1.08;
	margin-bottom:24px;
}
.tp-sub{
	font-size:1.06rem; line-height:1.65; color:var(--tp-ink-soft);
	max-width:460px; margin-bottom:36px;
}
.tp-cta-row{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.tp-hero .tp-eyebrow{ margin-bottom:22px; display:block; }

/* Receipt (signature element) */
.tp-receipt{
	background:var(--tp-ink); color:#fff;
	border-radius:var(--tp-radius-lg);
	padding:30px 28px 26px;
	font-family:var(--tp-font-mono);
	box-shadow:var(--tp-shadow-lg);
	animation:tpRise .6s ease both;
}
.tp-receipt-row{
	display:flex; justify-content:space-between; align-items:baseline;
	font-size:.92rem; padding:9px 0; color:#C7CBD4;
}
.tp-receipt-row span:last-child{ color:#fff; font-weight:500; }
.tp-receipt-divider{ border-top:1px dashed rgba(255,255,255,0.22); margin:6px 0; }
.tp-receipt-fee span:last-child{ color:var(--tp-emerald) !important; font-weight:600; }
.tp-receipt-total{ padding-top:14px; }
.tp-receipt-total span:first-child{ color:#fff; font-weight:500; }
.tp-receipt-total span:last-child{
	font-family:var(--tp-font-display); font-size:1.3rem; font-weight:700; color:#fff;
}
.tp-receipt-caption{
	margin-top:18px; font-family:var(--tp-font-body); font-size:.78rem;
	color:var(--tp-ink-faint); letter-spacing:.02em;
}
@keyframes tpRise{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }

/* Feature strip */
.tp-features{
	border-top:1px solid var(--tp-line);
	border-bottom:1px solid var(--tp-line);
	background:var(--tp-mist);
}
.tp-features-inner{
	max-width:1080px; margin:0 auto; padding:52px 24px;
	display:grid; grid-template-columns:repeat(3,1fr); gap:40px;
}
.tp-feature h3{ font-weight:600; font-size:1.05rem; margin-bottom:8px; }
.tp-feature p{ font-size:.92rem; color:var(--tp-ink-soft); line-height:1.55; margin:0; }

/* Auth section wrapper (interior width) */
.tp-auth-section{ max-width:520px; margin:0 auto; padding:72px 24px 88px; }
.tp-auth-heading{ text-align:center; margin-bottom:32px; }
.tp-auth-heading h2{ font-weight:700; font-size:1.6rem; margin-bottom:10px; }
.tp-auth-heading p{ color:var(--tp-ink-soft); font-size:.95rem; margin:0; }
/* Stack the Bootstrap grid rows used inside the auth forms into single column */
.tp-auth .card-body{ padding:30px 26px 26px; }
.tp-auth .form-group.row{ margin-bottom:16px; }
.tp-auth .control-label{ text-align:left !important; padding-top:0; }
.tp-auth .col-md-4,
.tp-auth .col-md-6,
.tp-auth .offset-md-4{ flex:0 0 100%; max-width:100%; margin-left:0; text-align:left; }

/* ---------- Stat / balance cards ---------- */
.tp-stat-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
	gap:18px;
	margin-bottom:28px;
}
.tp-stat-card{
	background:var(--tp-paper);
	border:1px solid var(--tp-line);
	border-radius:var(--tp-radius-lg);
	box-shadow:var(--tp-shadow-sm);
	padding:20px;
	display:flex;
	flex-direction:column;
	gap:14px;
	transition:box-shadow .18s ease, transform .18s ease;
}
.tp-stat-card:hover{ box-shadow:var(--tp-shadow); transform:translateY(-2px); }
.tp-stat-top{ display:flex; align-items:center; justify-content:space-between; }
.tp-coin-badge{
	font-family:var(--tp-font-mono); font-weight:600; font-size:.72rem;
	letter-spacing:.06em; color:var(--tp-ink-soft);
	background:var(--tp-mist); border:1px solid var(--tp-line);
	padding:4px 9px; border-radius:999px;
}
.tp-coin-name{ font-size:.8rem; color:var(--tp-ink-faint); }
.tp-stat-balance{
	font-family:var(--tp-font-display); font-weight:700;
	font-size:1.5rem; line-height:1.1; color:var(--tp-ink);
	word-break:break-word;
}
.tp-stat-actions{ display:flex; gap:8px; }
.tp-stat-actions .btn{ flex:1; text-align:center; }

/* ---------- Definition list (account details) ---------- */
.tp-dl{ margin:0 0 20px; }
.tp-dl-row{
	display:flex; justify-content:space-between; gap:16px;
	padding:10px 0; border-bottom:1px solid var(--tp-line);
	font-size:.9rem;
}
.tp-dl-row:last-child{ border-bottom:none; }
.tp-dl-row .tp-dl-key{ color:var(--tp-ink-faint); }
.tp-dl-row .tp-dl-val{ color:var(--tp-ink); font-weight:500; text-align:right; word-break:break-all; }

/* ---------- Address / mono block ---------- */
.tp-mono-block{
	font-family:var(--tp-font-mono);
	font-size:.85rem;
	background:var(--tp-mist);
	border:1px solid var(--tp-line);
	border-radius:var(--tp-radius);
	padding:14px 16px;
	word-break:break-all;
	color:var(--tp-ink);
	margin-bottom:16px;
}
.tp-qr{
	display:inline-block; padding:14px; background:#fff;
	border:1px solid var(--tp-line); border-radius:var(--tp-radius);
	box-shadow:var(--tp-shadow-sm);
}

/* pill status badge */
.tp-badge{
	display:inline-block; font-size:.72rem; font-weight:600;
	padding:3px 10px; border-radius:999px; text-transform:capitalize;
	background:var(--tp-mist); color:var(--tp-ink-soft); border:1px solid var(--tp-line);
}
.tp-badge.is-sent,.tp-badge.is-active,.tp-badge.is-completed{ background:var(--tp-emerald-soft); color:#0B7A4B; border-color:#BFE7D3; }
.tp-badge.is-pending,.tp-badge.is-processing{ background:var(--tp-amber-soft); color:var(--tp-amber); border-color:#F0D9A8; }
.tp-badge.is-denied,.tp-badge.is-failed,.tp-badge.is-disabled,.tp-badge.is-deleted{ background:var(--tp-red-soft); color:var(--tp-red); border-color:#F1C9C9; }

/* utility */
.tp-muted{ color:var(--tp-ink-faint); }
.tp-mb-0{ margin-bottom:0 !important; }
.tp-stack > * + *{ margin-top:10px; }
.tp-inline-actions{ display:flex; flex-wrap:wrap; gap:6px; }
.tp-inline-actions form{ margin:0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{
	flex-shrink:0;
	text-align:center;
	background:var(--tp-mist);
	border-top:1px solid var(--tp-line);
	padding:26px 0;
	height:auto;
	line-height:1.6;
	margin-top:auto;
}
.footer .text-muted{ color:var(--tp-ink-faint) !important; font-size:.88rem; }
.footer a{ color:var(--tp-ink-soft); font-weight:600; }
.footer a:hover{ color:var(--tp-ink); }
.ads{ text-align:center; margin:2px 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:900px){
	.tp-hero{ grid-template-columns:1fr; padding:64px 24px 56px; gap:40px; }
	.tp-features-inner{ grid-template-columns:1fr; gap:28px; padding:40px 24px; }
}
@media (max-width:575px){
	body > .container{ padding-top:26px; padding-bottom:40px; }
	.card-body{ padding:18px; }
	.card-header{ padding:15px 18px; }
	.tp-stat-grid{ grid-template-columns:1fr; }
	.tp-receipt{ padding:24px 20px; }
	.navbar.menu{ padding:12px 16px; }
}

@media (prefers-reduced-motion:reduce){
	.tp-receipt{ animation:none; }
	.btn:hover,.tp-stat-card:hover{ transform:none; }
}