:root {
	--tr-ink: #060a12;
	--tr-panel: rgba(12, 18, 30, .94);
	--tr-panel-soft: rgba(19, 28, 44, .86);
	--tr-line: rgba(193, 216, 255, .13);
	--tr-gold: #f3c76b;
	--tr-gold-bright: #ffe6a6;
	--tr-cyan: #5ce5df;
	--tr-text: #eef5ff;
	--tr-muted: #8797ad;
}

.tr-dashboard {
	position: relative;
	max-width: 1180px;
	margin: 10px auto 36px;
	color: var(--tr-text);
	font-family: Inter, "Segoe UI", sans-serif;
}

.tr-dashboard *, .titan-referral-register *, .tr-account-card * { box-sizing: border-box; }

.tr-hero {
	position: relative;
	min-height: 390px;
	overflow: hidden;
	padding: 56px 58px;
	border: 1px solid rgba(243, 199, 107, .24);
	border-radius: 24px;
	background:
		radial-gradient(circle at 78% 50%, rgba(33, 176, 173, .22), transparent 28%),
		linear-gradient(115deg, rgba(5, 9, 17, .99) 12%, rgba(13, 22, 36, .96) 62%, rgba(7, 29, 34, .98));
	box-shadow: 0 30px 80px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .04);
}

.tr-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: .34;
	background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
	background-size: 32px 32px;
	-webkit-mask-image: linear-gradient(90deg, #000, transparent 83%);
	mask-image: linear-gradient(90deg, #000, transparent 83%);
}

.tr-hero::after {
	content: "✦";
	position: absolute;
	right: 8%;
	top: 9%;
	font-family: Georgia, serif;
	font-size: 270px;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px rgba(92, 229, 223, .13);
	filter: drop-shadow(0 0 34px rgba(92, 229, 223, .1));
	transform: rotate(12deg);
}

.tr-hero__content { position: relative; z-index: 2; max-width: 735px; }
.tr-eyebrow { color: var(--tr-gold); font-size: 11px; font-weight: 800; letter-spacing: .21em; }
.tr-hero h1 { max-width: 660px; margin: 13px 0 14px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(38px, 5vw, 64px); font-weight: 500; line-height: .99; letter-spacing: -.035em; }
.tr-hero h1 em { color: var(--tr-gold-bright); font-weight: 500; }
.tr-hero p { max-width: 650px; margin: 0; color: #aeb9c9; font-size: 16px; line-height: 1.65; }

.tr-hero__glow { position: absolute; border-radius: 50%; filter: blur(75px); pointer-events: none; }
.tr-hero__glow--one { width: 250px; height: 250px; right: 8%; top: 8%; background: rgba(14, 196, 184, .15); }
.tr-hero__glow--two { width: 160px; height: 160px; left: 24%; bottom: -23%; background: rgba(243, 199, 107, .1); }

.tr-hero__seal {
	position: absolute;
	z-index: 3;
	right: 52px;
	top: 58px;
	display: grid;
	place-content: center;
	width: 132px;
	height: 132px;
	border: 1px solid rgba(92, 229, 223, .34);
	border-radius: 50%;
	text-align: center;
	background: rgba(5, 17, 23, .68);
	box-shadow: inset 0 0 28px rgba(92, 229, 223, .09), 0 0 0 7px rgba(92,229,223,.025);
}
.tr-hero__seal::before, .tr-hero__seal::after { content: "✦"; position: absolute; left: 50%; color: var(--tr-cyan); font-size: 11px; transform: translateX(-50%); }
.tr-hero__seal::before { top: 7px; }.tr-hero__seal::after { bottom: 7px; }
.tr-hero__seal span { color: var(--tr-cyan); font-family: Georgia, serif; font-size: 36px; line-height: 1; }
.tr-hero__seal small { margin-top: 8px; color: #96aaa9; font-size: 8px; font-weight: 800; letter-spacing: .18em; line-height: 1.35; }

.tr-share-box { margin-top: 27px; padding: 15px; border: 1px solid var(--tr-line); border-radius: 14px; background: rgba(3, 7, 14, .64); backdrop-filter: blur(10px); }
.tr-share-box label { display: block; margin: 0 0 8px 3px; color: #8998ac; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.tr-share-box__controls { display: flex; gap: 9px; }
.tr-share-box input { min-width: 0; flex: 1; height: 43px; padding: 0 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; outline: none; color: #dfeafb; background: rgba(255,255,255,.045); font: 13px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.tr-share-box input:focus { border-color: rgba(92, 229, 223, .55); box-shadow: 0 0 0 3px rgba(92, 229, 223, .07); }
.tr-button { min-height: 43px; padding: 0 17px; border: 1px solid transparent; border-radius: 9px; cursor: pointer; font: 800 11px/1 Inter, "Segoe UI", sans-serif; letter-spacing: .07em; text-transform: uppercase; transition: transform .16s, border-color .16s, background .16s, color .16s; }
.tr-button:hover { transform: translateY(-1px); }
.tr-button--copy { color: #171309; background: linear-gradient(135deg, var(--tr-gold-bright), var(--tr-gold)); box-shadow: 0 7px 20px rgba(243,199,107,.13); }
.tr-button--copy.is-copied { color: #06201d; background: var(--tr-cyan); }
.tr-button--share { border-color: rgba(92, 229, 223, .32); color: var(--tr-cyan); background: rgba(92, 229, 223, .07); }
.tr-copy-status { display: block; min-height: 14px; margin: 5px 0 -5px 3px; color: var(--tr-cyan); font-size: 10px; }

.tr-stats { position: relative; z-index: 4; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: -25px 24px 22px; }
.tr-stats article { display: flex; align-items: center; min-height: 92px; padding: 20px; border: 1px solid var(--tr-line); border-radius: 14px; background: rgba(11, 17, 28, .96); box-shadow: 0 16px 36px rgba(0,0,0,.25); }
.tr-stat-icon { display: grid; flex: 0 0 42px; place-content: center; width: 42px; height: 42px; margin-right: 13px; border: 1px solid rgba(243,199,107,.2); border-radius: 11px; color: var(--tr-gold); background: rgba(243,199,107,.06); }
.tr-stats small { display: block; margin-bottom: 4px; color: var(--tr-muted); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.tr-stats strong { color: #fff; font-family: Georgia, serif; font-size: 27px; font-weight: 500; }
.tr-stats strong i { color: var(--tr-gold); font: 700 10px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; }

.tr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; }
.tr-panel { border: 1px solid var(--tr-line); border-radius: 17px; background: linear-gradient(145deg, rgba(15,22,35,.97), rgba(8,13,23,.98)); box-shadow: 0 18px 48px rgba(0,0,0,.22); }
.tr-panel__header { display: flex; align-items: flex-start; justify-content: space-between; padding: 25px 27px 20px; border-bottom: 1px solid rgba(255,255,255,.075); }
.tr-panel__header h2 { margin: 4px 0 0; color: #f5f7fa; font-family: Georgia, serif; font-size: 25px; font-weight: 500; }
.tr-live { display: flex; align-items: center; gap: 7px; margin-top: 7px; color: #81938f; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.tr-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--tr-cyan); box-shadow: 0 0 10px var(--tr-cyan); animation: tr-pulse 2s infinite; }
@keyframes tr-pulse { 50% { opacity: .35; } }

.tr-friends { padding: 10px; }
.tr-friend { display: flex; gap: 15px; margin: 5px; padding: 17px; border: 1px solid transparent; border-radius: 13px; background: rgba(255,255,255,.025); transition: background .18s, border-color .18s; }
.tr-friend:hover { border-color: rgba(92,229,223,.13); background: rgba(92,229,223,.035); }
.tr-friend--ascended { background: linear-gradient(90deg, rgba(243,199,107,.055), rgba(92,229,223,.035)); }
.tr-avatar { display: grid; flex: 0 0 46px; place-content: center; width: 46px; height: 46px; border: 1px solid rgba(243,199,107,.28); border-radius: 50%; color: var(--tr-gold-bright); background: radial-gradient(circle at 35% 30%, #354051, #111725 70%); font: 500 19px/1 Georgia, serif; box-shadow: inset 0 0 0 3px rgba(0,0,0,.3); }
.tr-friend__main { min-width: 0; flex: 1; }
.tr-friend__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tr-friend__title strong { display: block; overflow: hidden; color: #f2f5f9; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.tr-friend__title small { display: block; margin-top: 3px; color: #718096; font-size: 10px; }
.tr-friend__title > b { color: var(--tr-cyan); font-size: 11px; }
.tr-donor-badge { padding: 5px 8px; border: 1px solid rgba(243,199,107,.25); border-radius: 20px; color: var(--tr-gold-bright); background: rgba(243,199,107,.07); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.tr-progress { overflow: hidden; height: 5px; margin-top: 12px; border-radius: 20px; background: rgba(255,255,255,.075); }
.tr-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #249b9c, var(--tr-cyan)); box-shadow: 0 0 11px rgba(92,229,223,.35); }
.tr-progress--gold span { background: linear-gradient(90deg, #c49136, var(--tr-gold-bright)); box-shadow: 0 0 11px rgba(243,199,107,.28); }
.tr-friend__foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; color: #66768b; font-size: 9px; }
.tr-friend__foot em { color: #91a0b2; font-style: normal; }

.tr-sidebar { display: grid; align-content: start; gap: 18px; }
.tr-next-reward, .tr-commission { padding: 24px; }
.tr-next-reward__value { display: flex; align-items: baseline; gap: 8px; margin: 13px 0 6px; }
.tr-next-reward__value strong { color: var(--tr-gold-bright); font-family: Georgia, serif; font-size: 47px; font-weight: 500; line-height: 1; }
.tr-next-reward__value span { color: var(--tr-gold); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.tr-next-reward p, .tr-commission p { color: #8998aa; font-size: 12px; line-height: 1.65; }
.tr-next-reward p b { color: #eef5ff; }
.tr-next-reward > small { display: block; margin-top: 8px; color: #6f7e92; font-size: 9px; text-align: right; }
.tr-commission { position: relative; overflow: hidden; background: radial-gradient(circle at 100% 0, rgba(92,229,223,.13), transparent 45%), linear-gradient(145deg, rgba(15,28,33,.97), rgba(8,14,23,.98)); }
.tr-commission__mark { position: absolute; right: 17px; top: 8px; color: rgba(92,229,223,.11); font-family: Georgia, serif; font-size: 76px; }
.tr-commission h3 { position: relative; margin: 0; color: var(--tr-cyan); font-family: Georgia, serif; font-size: 23px; font-weight: 500; }
.tr-commission ul { margin: 15px 0 0; padding: 0; list-style: none; }
.tr-commission li { position: relative; margin: 8px 0; padding-left: 18px; color: #9aabba; font-size: 10px; }
.tr-commission li::before { content: "✓"; position: absolute; left: 0; color: var(--tr-cyan); }

.tr-empty { padding: 68px 25px; text-align: center; }
.tr-empty > span { display: block; color: var(--tr-gold); font-size: 38px; }
.tr-empty h3 { margin: 9px 0 7px; font-family: Georgia, serif; font-size: 23px; font-weight: 500; }
.tr-empty p { max-width: 490px; margin: 0 auto 20px; color: var(--tr-muted); font-size: 12px; line-height: 1.6; }

.tr-roadmap, .tr-ledger { margin-top: 18px; }
.tr-roadmap__grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 0; }
.tr-roadmap__track { min-width: 0; padding: 24px 27px 28px; }
.tr-roadmap__track + .tr-roadmap__track { border-left: 1px solid var(--tr-line); }
.tr-roadmap__track h3 { margin: 0 0 4px; color: #e9eef6; font-size: 13px; }
.tr-roadmap__track p { margin: 0 0 18px; color: var(--tr-muted); font-size: 10px; }
.tr-tier-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.tr-tier-row--counts { grid-template-columns: repeat(6, 1fr); }
.tr-tier-row span { position: relative; display: grid; min-height: 52px; place-content: center; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; text-align: center; background: rgba(255,255,255,.025); }
.tr-tier-row span::before { content: ""; position: absolute; left: 50%; top: -8px; width: 5px; height: 5px; border: 1px solid rgba(243,199,107,.5); border-radius: 50%; background: #111827; transform: translateX(-50%); }
.tr-tier-row b { color: #dce4ef; font-size: 10px; }
.tr-tier-row small { margin-top: 4px; color: var(--tr-gold); font-size: 8px; }
.tr-tier-row .is-complete { border-color: rgba(92,229,223,.25); background: rgba(92,229,223,.06); }
.tr-tier-row .is-complete::before { border-color: var(--tr-cyan); background: var(--tr-cyan); box-shadow: 0 0 8px var(--tr-cyan); }

.tr-ledger__rows { padding: 8px 22px 17px; }
.tr-ledger__rows > div { display: flex; align-items: center; gap: 12px; padding: 13px 5px; border-bottom: 1px solid rgba(255,255,255,.055); }
.tr-ledger__rows > div:last-child { border-bottom: 0; }
.tr-ledger__gem { color: var(--tr-gold); }
.tr-ledger__rows p { flex: 1; margin: 0; }
.tr-ledger__rows p strong, .tr-ledger__rows p small { display: block; }
.tr-ledger__rows p strong { color: #dfe6ef; font-size: 11px; }
.tr-ledger__rows p small { margin-top: 3px; color: #65748a; font-size: 9px; }
.tr-ledger__rows > div > b { color: var(--tr-cyan); font-size: 11px; }

.titan-referral-register { display: flex; gap: 14px; margin: 20px 0; padding: 17px; border: 1px solid rgba(243,199,107,.2); border-radius: 12px; background: linear-gradient(120deg, rgba(243,199,107,.06), rgba(92,229,223,.035)); }
.tr-register-icon { display: grid; flex: 0 0 42px; place-content: center; height: 42px; border: 1px solid rgba(243,199,107,.28); border-radius: 50%; color: var(--tr-gold); background: rgba(8,13,22,.5); }
.tr-register-copy { min-width: 0; flex: 1; }
.tr-register-copy label { display: block; margin-bottom: 7px; color: #eef5ff; font-size: 12px; font-weight: 700; }
.tr-register-copy label span { margin-left: 6px; color: #7f8ea3; font-size: 9px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.tr-register-copy input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; outline: none; color: #e7eef8; background: rgba(3,7,14,.52); }
.tr-register-copy input:focus { border-color: rgba(92,229,223,.55); }
.tr-register-copy input[readonly] { border-color: rgba(92,229,223,.22); color: var(--tr-cyan); }
.tr-register-copy small { display: block; margin-top: 6px; color: #7e8da0; font-size: 10px; }

.tr-account-card { display: flex; align-items: center; gap: 15px; margin: 0 0 17px; padding: 18px 20px; border: 1px solid rgba(243,199,107,.24); border-radius: 14px; color: #f1f5fb !important; text-decoration: none !important; background: radial-gradient(circle at 90% 0, rgba(92,229,223,.12), transparent 34%), linear-gradient(115deg, rgba(20,25,35,.98), rgba(8,22,26,.98)); box-shadow: 0 14px 35px rgba(0,0,0,.17); transition: transform .18s, border-color .18s; }
.tr-account-card:hover { border-color: rgba(92,229,223,.35); transform: translateY(-2px); }
.tr-account-card__sigil { display: grid; flex: 0 0 46px; place-content: center; height: 46px; border: 1px solid rgba(243,199,107,.3); border-radius: 50%; color: var(--tr-gold); font-size: 20px; }
.tr-account-card__copy { min-width: 0; flex: 1; }
.tr-account-card__copy strong, .tr-account-card__copy small { display: block; }
.tr-account-card__copy strong { font-family: Georgia, serif; font-size: 18px; font-weight: 500; }
.tr-account-card__copy small { margin-top: 4px; color: #8d9aac; font-size: 10px; }
.tr-account-card__action { color: var(--tr-cyan); font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.tr-account-card__action b { margin-left: 5px; font-size: 16px; }

@media (max-width: 980px) {
	.tr-hero { padding: 45px 36px; }
	.tr-hero__seal { display: none; }
	.tr-stats { grid-template-columns: 1fr 1fr; }
	.tr-layout { grid-template-columns: 1fr; }
	.tr-sidebar { grid-template-columns: 1fr 1fr; }
	.tr-roadmap__grid { grid-template-columns: 1fr; }
	.tr-roadmap__track + .tr-roadmap__track { border-top: 1px solid var(--tr-line); border-left: 0; }
}

@media (max-width: 640px) {
	.tr-dashboard { margin-top: 0; }
	.tr-hero { min-height: 0; padding: 34px 20px; border-radius: 16px; }
	.tr-hero h1 { font-size: 39px; }
	.tr-share-box__controls { flex-wrap: wrap; }
	.tr-share-box input { flex-basis: 100%; }
	.tr-share-box .tr-button { flex: 1; }
	.tr-stats { grid-template-columns: 1fr 1fr; margin: 12px 0 18px; }
	.tr-stats article { min-height: 78px; padding: 13px; }
	.tr-stat-icon { display: none; }
	.tr-stats strong { font-size: 22px; }
	.tr-sidebar { grid-template-columns: 1fr; }
	.tr-panel__header { padding: 20px; }
	.tr-friend { padding: 13px 10px; }
	.tr-avatar { flex-basis: 38px; width: 38px; height: 38px; }
	.tr-friend__title { align-items: flex-start; }
	.tr-friend__title > b, .tr-donor-badge { max-width: 48%; text-align: right; }
	.tr-friend__foot { display: block; }
	.tr-friend__foot em { display: block; margin-top: 3px; }
	.tr-tier-row, .tr-tier-row--counts { grid-template-columns: repeat(3, 1fr); gap: 10px 5px; }
	.tr-account-card__action { display: none; }
}

/* TitanWeb-native visual pass: restrained panels, shared texture, no glow art. */
.tr-dashboard {
	--tr-panel-texture: url("../../../templates/asgard/images/titan-ui/panel-texture.png");
	--tr-gold: var(--gold, #c59a54);
	--tr-gold-bright: var(--gold-light, #e7c884);
	--tr-cyan: var(--cyan-soft, #8bcce0);
	--tr-muted: var(--muted, #8193a1);
}

.tr-hero,
.tr-panel,
.tr-stats article,
.tr-share-box,
.tr-commission {
	background: #071421 var(--tr-panel-texture) repeat;
	box-shadow: none;
	backdrop-filter: none;
}

.tr-hero {
	min-height: 0;
	padding: 30px;
	border-color: var(--line, #294759);
	border-radius: 6px;
}

.tr-hero::before,
.tr-hero::after,
.tr-hero__glow,
.tr-hero__seal,
.tr-stat-icon,
.tr-commission__mark {
	display: none;
}

.tr-hero__content { max-width: none; }
.tr-hero h1 { max-width: none; margin: 6px 0 8px; font-size: clamp(31px, 4vw, 43px); line-height: 1.1; }
.tr-hero p { max-width: none; font-size: 13px; }
.tr-eyebrow { color: var(--tr-gold); font-size: 9px; letter-spacing: .14em; }

.tr-share-box {
	margin-top: 22px;
	padding: 13px;
	border-color: var(--line, #294759);
	border-radius: 5px;
}
.tr-share-box input { border-radius: 3px; background: #040b12; }
.tr-button { border-radius: 3px; }
.tr-button--copy { border-color: #557386; color: #e6edf1; background: #17384e; box-shadow: none; }
.tr-button--copy:hover { border-color: var(--tr-gold); color: var(--tr-gold-bright); background: #1b3f55; }
.tr-button--copy.is-copied { color: #d8fff0; background: #1b5c47; }
.tr-button--share { border-color: #3c6174; color: #c8dce5; background: #0b2636; }

.tr-stats {
	z-index: auto;
	gap: 1px;
	margin: 14px 0 22px;
	border: 1px solid var(--line, #294759);
	background: var(--line, #294759);
}
.tr-stats article {
	min-height: 80px;
	padding: 16px 18px;
	border: 0;
	border-radius: 0;
}
.tr-stats strong { font-size: 25px; }

.tr-layout { gap: 14px; }
.tr-panel { border-color: var(--line, #294759); border-radius: 6px; }
.tr-panel__header { padding: 20px 22px 16px; border-color: var(--line-soft, rgba(90,128,150,.24)); }
.tr-panel__header h2 { font-size: 21px; }

.tr-friends { padding: 0 16px 8px; }
.tr-friend,
.tr-friend--ascended {
	margin: 0;
	padding: 16px 6px;
	border: 0;
	border-bottom: 1px solid var(--line-soft, rgba(90,128,150,.22));
	border-radius: 0;
	background: transparent;
}
.tr-friend:last-child { border-bottom: 0; }
.tr-friend:hover { border-color: var(--line-soft, rgba(90,128,150,.22)); background: rgba(15, 44, 61, .24); }
.tr-avatar { border-radius: 3px; border-color: #365c70; background: #0c2132; box-shadow: none; }
.tr-donor-badge { border-radius: 3px; }
.tr-progress { height: 4px; border-radius: 0; background: #04101a; }
.tr-progress span,
.tr-progress--gold span { border-radius: 0; background: #3e879c; box-shadow: none; }
.tr-progress--gold span { background: #9e773d; }

.tr-next-reward,
.tr-commission { padding: 21px; }
.tr-next-reward__value strong { font-size: 40px; }
.tr-commission { border-radius: 6px; }
.tr-commission h3 { color: var(--tr-gold-bright); font-family: Georgia, serif; font-size: 20px; }

.tr-roadmap,
.tr-ledger { margin-top: 14px; }
.tr-roadmap__track { padding: 21px 22px 24px; }
.tr-tier-row span {
	min-height: 48px;
	border-radius: 2px;
	background: #06111c;
}
.tr-tier-row span::before { display: none; }
.tr-tier-row .is-complete { background: #10352f; }

.tr-empty { padding: 58px 24px; }
.tr-empty > span { display: none; }
.tr-empty h3 { font-size: 20px; }

.tr-account-card {
	border-color: var(--line, #294759);
	border-radius: 6px;
	background: #071421 url("../../../templates/asgard/images/titan-ui/panel-texture.png") repeat;
	box-shadow: none;
}
.tr-account-card:hover { border-color: #4a788f; transform: none; }
.tr-account-card__sigil { border-radius: 3px; }

.titan-referral-register {
	border-color: var(--line, #294759);
	border-radius: 5px;
	background: rgba(5, 10, 17, .34);
}
.tr-register-icon { border-radius: 3px; }
.tr-register-copy input { border-radius: 3px; background: #040b12; }

@media (max-width: 640px) {
	.tr-hero { padding: 23px 18px; border-radius: 6px; }
	.tr-stats { margin: 12px 0 18px; }
}

/* Modern glass treatment used by the current Asgard account interface. */
.tr-dashboard {
	font-family: var(--body, "Segoe UI", sans-serif);
	--tr-glass: rgba(5, 10, 17, .40);
	--tr-glass-raised: rgba(9, 17, 27, .58);
	--tr-glass-inset: rgba(3, 8, 14, .34);
	--tr-glass-line: rgba(215, 220, 229, .12);
	--tr-glass-line-strong: rgba(199, 154, 75, .30);
}

.tr-hero,
.tr-panel,
.tr-stats article,
.tr-share-box,
.tr-commission,
.tr-account-card,
.titan-referral-register {
	background: var(--tr-glass);
	border-color: var(--tr-glass-line);
	box-shadow: 0 18px 46px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .025);
	-webkit-backdrop-filter: blur(14px) saturate(118%);
	backdrop-filter: blur(14px) saturate(118%);
}

.tr-hero {
	padding: 32px;
	border-radius: var(--radius, 8px);
}
.tr-hero h1 {
	margin: 5px 0 7px;
	color: #f3f5f8;
	font: 600 clamp(30px, 4vw, 42px)/1.12 var(--stats, "Arial Narrow", sans-serif);
	letter-spacing: .015em;
}
.tr-hero h1 em { color: inherit; font-style: normal; }
.tr-hero p { color: #aeb7c5; font: 400 13px/1.6 var(--body, sans-serif); }
.tr-eyebrow { color: var(--gold-light, #e6c47d); font: 700 10px/1 var(--stats, sans-serif); letter-spacing: .12em; }

.tr-share-box {
	background: var(--tr-glass-inset);
	border-radius: 6px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
.tr-share-box label { font-family: var(--stats, sans-serif); }
.tr-share-box input {
	border-color: rgba(215,220,229,.13);
	border-radius: 5px;
	background: rgba(3, 7, 12, .48);
	font-family: var(--body, sans-serif);
}
.tr-button {
	border-radius: 5px;
	font-family: var(--stats, sans-serif);
	font-size: 12px;
	letter-spacing: .05em;
}
.tr-button--copy {
	border-color: rgba(122,165,255,.42);
	color: #edf3ff;
	background: rgba(62,123,255,.22);
}
.tr-button--copy:hover { border-color: rgba(122,165,255,.72); color: #fff; background: rgba(62,123,255,.34); }
.tr-button--share { border-color: rgba(215,220,229,.16); color: #d7dce5; background: rgba(215,220,229,.06); }

.tr-stats {
	gap: 10px;
	border: 0;
	background: transparent;
}
.tr-stats article {
	border: 1px solid var(--tr-glass-line);
	border-radius: var(--radius, 8px);
}
.tr-stats small { color: #8f9bac; font-family: var(--stats, sans-serif); }
.tr-stats strong { color: #f3f5f8; font: 700 28px/1 var(--stats, sans-serif); letter-spacing: .015em; }
.tr-stats strong i { font-family: var(--stats, sans-serif); }

.tr-layout { gap: 16px; }
.tr-panel { border-radius: var(--radius, 8px); }
.tr-panel__header { border-color: var(--tr-glass-line); }
.tr-panel__header h2,
.tr-commission h3,
.tr-empty h3,
.tr-roadmap__track h3 {
	color: #eef2f6;
	font-family: var(--body, sans-serif);
	font-weight: 600;
	letter-spacing: 0;
}
.tr-panel__header h2 { font-size: 19px; }
.tr-live { font-family: var(--stats, sans-serif); }

.tr-friend,
.tr-friend--ascended { border-color: var(--tr-glass-line); }
.tr-friend:hover { background: rgba(122,165,255,.045); }
.tr-avatar {
	border-color: rgba(122,165,255,.24);
	border-radius: 50%;
	color: #dce7ff;
	background: rgba(62,123,255,.12);
	font: 700 18px/1 var(--stats, sans-serif);
}
.tr-friend__title strong { font-family: var(--body, sans-serif); font-weight: 600; }
.tr-friend__title > b { color: #9fc4ff; font-family: var(--stats, sans-serif); }
.tr-donor-badge { border-color: rgba(199,154,75,.28); background: rgba(199,154,75,.08); font-family: var(--stats, sans-serif); }
.tr-progress { border-radius: 999px; background: rgba(215,220,229,.08); }
.tr-progress span { border-radius: inherit; background: #3e7bff; }
.tr-progress--gold span { background: #c79a4b; }

.tr-next-reward,
.tr-commission { background: var(--tr-glass); }
.tr-next-reward__value strong { font: 700 43px/1 var(--stats, sans-serif); }
.tr-next-reward__value span,
.tr-next-reward > small { font-family: var(--stats, sans-serif); }
.tr-commission { border-radius: var(--radius, 8px); }
.tr-commission h3 { color: #eef2f6; font-size: 17px; }
.tr-commission li::before { color: #65d6a6; }

.tr-tier-row span {
	border-color: var(--tr-glass-line);
	border-radius: 5px;
	background: rgba(3,8,14,.30);
}
.tr-tier-row b,
.tr-tier-row small { font-family: var(--stats, sans-serif); }
.tr-tier-row .is-complete { border-color: rgba(101,214,166,.30); background: rgba(101,214,166,.09); }

.tr-ledger__rows > div { border-color: var(--tr-glass-line); }
.tr-ledger__rows p strong { font-family: var(--body, sans-serif); }
.tr-ledger__rows > div > b { color: #9fc4ff; font-family: var(--stats, sans-serif); }

.tr-account-card {
	border-radius: var(--radius, 8px);
}
.tr-account-card:hover { border-color: rgba(122,165,255,.36); background: var(--tr-glass-raised); }
.tr-account-card__sigil { border-color: rgba(122,165,255,.25); border-radius: 50%; color: #9fc4ff; background: rgba(62,123,255,.08); }
.tr-account-card__copy strong { font-family: var(--body, sans-serif); font-weight: 600; }
.tr-account-card__action { color: #9fc4ff; font-family: var(--stats, sans-serif); }

.titan-referral-register {
	border-radius: var(--radius, 8px);
}
.tr-register-icon { border-color: rgba(122,165,255,.24); border-radius: 50%; color: #9fc4ff; background: rgba(62,123,255,.08); }
.tr-register-copy label,
.tr-register-copy input { font-family: var(--body, sans-serif); }
.tr-register-copy input { border-radius: 5px; background: rgba(3,7,12,.48); }

@media (max-width: 640px) {
	.tr-hero { padding: 24px 19px; border-radius: var(--radius, 8px); }
	.tr-stats { gap: 8px; }
}