/* =========================================================
   TRX EDITION — A2Z PREMIUM UI
   Performance-first animation system
   Mobile + Desktop Optimized
   ========================================================= */

:root {
    --trx-bg: #070b16;
    --trx-bg-2: #0a1020;
    --trx-panel: #0f172a;
    --trx-panel-2: #111c33;
    --trx-border: rgba(137, 158, 211, .15);
    --trx-border-strong: rgba(112, 135, 255, .34);
    --trx-text: #eef3ff;
    --trx-muted: #8391ad;
    --trx-primary: #667cff;
    --trx-primary-2: #7861ff;
    --trx-success: #35d4a1;
    --trx-danger: #ff5d82;
    --trx-warning: #ffc85c;
    --trx-radius: 18px;
    --trx-shadow: 0 14px 40px rgba(0,0,0,.22);
    --trx-sidebar: 258px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--trx-text);
    background:
        radial-gradient(circle at 15% -5%, rgba(102,124,255,.08), transparent 28%),
        radial-gradient(circle at 92% 15%, rgba(120,97,255,.06), transparent 22%),
        linear-gradient(145deg, var(--trx-bg), var(--trx-bg-2));
    font: 15px/1.55 system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Arial, sans-serif;
    overflow-x: hidden;
}

::selection {
    background: rgba(102,124,255,.28);
}

a {
    color: #cbd6f3;
    text-decoration: none;
    transition:
        color .16s ease,
        background .16s ease,
        border-color .16s ease,
        transform .16s ease;
}

a:hover {
    color: #fff;
}

img {
    max-width: 100%;
}

/* =========================================================
   APP SHELL
   ========================================================= */

.trx-app {
    min-height: 100vh;
}

.trx-nav-toggle {
    position: fixed;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.trx-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--trx-sidebar);
    z-index: 100;
    display: flex;
    flex-direction: column;
    padding: 17px 13px;
    border-right: 1px solid var(--trx-border);
    background: rgba(8,13,27,.98);
    box-shadow: 16px 0 45px rgba(0,0,0,.17);
}

.trx-sidebar-brand {
    padding: 5px 7px 16px;
}

.trx-logo {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #fff;
}

.trx-logo:hover {
    color: #fff;
}

.trx-logo-mark {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 13px;
    background:
        linear-gradient(
            135deg,
            var(--trx-primary),
            var(--trx-primary-2)
        );
    color: #fff;
    font-weight: 950;
    box-shadow: 0 8px 24px rgba(102,124,255,.22);
}

.trx-logo strong {
    display: block;
    font-size: 15px;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.trx-logo small {
    display: block;
    margin-top: 3px;
    color: #697792;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.trx-user-card {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 3px 1px 14px;
    padding: 11px;
    border: 1px solid var(--trx-border);
    border-radius: 14px;
    background: #0d1528;
}

.trx-avatar {
    width: 33px;
    height: 33px;
    display: grid;
    place-items: center;
    flex: 0 0 33px;
    border-radius: 10px;
    background: rgba(102,124,255,.12);
    color: #cbd4ff;
    font-size: 12px;
    font-weight: 900;
}

.trx-user-meta {
    min-width: 0;
    flex: 1;
}

.trx-user-meta strong {
    display: block;
    overflow: hidden;
    color: #edf2ff;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trx-user-meta span {
    display: block;
    margin-top: 2px;
    color: #66748f;
    font-size: 9px;
}

.trx-online-dot,
.trx-topbar-status {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--trx-success);
    box-shadow: 0 0 11px rgba(53,212,161,.55);
}

.trx-nav-label {
    margin: 8px 8px 7px;
    color: #55627d;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.trx-side-nav {
    display: grid;
    gap: 4px;
}

.trx-side-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 41px;
    padding: 9px 11px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #8e9cb7;
    font-size: 11px;
    font-weight: 750;
}

.trx-side-link:hover {
    color: #eef3ff;
    background: rgba(102,124,255,.06);
}

.trx-side-link.active {
    color: #fff;
    border-color: rgba(102,124,255,.22);
    background:
        linear-gradient(
            135deg,
            rgba(102,124,255,.13),
            rgba(120,97,255,.06)
        );
    box-shadow: inset 3px 0 0 var(--trx-primary);
}

.trx-side-icon {
    width: 20px;
    flex: 0 0 20px;
    text-align: center;
    color: #9eadff;
    font-size: 14px;
}

.trx-sidebar-spacer {
    flex: 1;
}

/* =========================================================
   SUPPORT
   ========================================================= */

.trx-support-mini {
    margin: 12px 1px 10px;
    padding: 11px;
    border: 1px solid rgba(102,124,255,.13);
    border-radius: 13px;
    background:
        linear-gradient(
            135deg,
            rgba(102,124,255,.07),
            rgba(120,97,255,.025)
        );
}

.trx-support-mini-title {
    margin-bottom: 7px;
    color: #d9e1ff;
    font-size: 10px;
    font-weight: 800;
}

.trx-support-mini-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}

.trx-support-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 30px;
    padding: 5px 6px;
    overflow: hidden;
    border: 1px solid rgba(102,124,255,.12);
    border-radius: 8px;
    background: rgba(255,255,255,.018);
    color: #8d9abc;
    font-size: 8px;
    font-weight: 750;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition:
        transform .14s ease,
        background .14s ease,
        border-color .14s ease,
        color .14s ease;
}

.trx-support-btn:hover {
    color: #fff;
    background: rgba(102,124,255,.08);
    border-color: rgba(102,124,255,.26);
    transform: translateY(-1px);
}

.trx-logout {
    margin-top: 1px;
}

.trx-main {
    min-height: 100vh;
    margin-left: var(--trx-sidebar);
}

/* =========================================================
   TOPBAR
   ========================================================= */

.trx-topbar {
    position: sticky;
    top: 0;
    z-index: 70;
    min-height: 64px;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--trx-border);
    background: #0a1020;
}

.trx-topbar-left,
.trx-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.trx-topbar-brand {
    display: none;
    color: #fff;
    font-size: 14px;
    font-weight: 850;
}

.trx-menu-button {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--trx-border);
    border-radius: 11px;
    background: #0d1528;
    cursor: pointer;
}

.trx-menu-button span {
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: #dce4fb;
}

.trx-topbar-support,
.trx-topbar-login,
.trx-topbar-user {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid var(--trx-border);
    border-radius: 10px;
    background: #0d1528;
    font-size: 10px;
    font-weight: 800;
}

.trx-topbar-support:hover,
.trx-topbar-login:hover {
    color: #fff;
    border-color: var(--trx-border-strong);
    background: rgba(102,124,255,.07);
}

.trx-topbar-support span {
    color: var(--trx-success);
}

.trx-topbar-user {
    border-color: transparent;
    background: transparent;
    color: #9aa8c3;
}

/* =========================================================
   MAIN
   ========================================================= */

.wrap {
    width: min(1240px, calc(100% - 40px));
    margin: 0 auto;
    padding: 30px 0 40px;
    animation: trxFade .26s ease-out both;
}

h1,
h2,
h3,
h4 {
    margin-top: 0;
    color: #fff;
    letter-spacing: -.025em;
}

h1 {
    font-size: clamp(28px, 4vw, 42px);
}

h2 {
    font-size: clamp(23px, 3vw, 31px);
}

h3 {
    font-size: 18px;
}

p {
    color: #c9d3e9;
}

.muted {
    color: var(--trx-muted) !important;
    opacity: 1;
}

small {
    color: #71809b;
}

/* =========================================================
   CARDS
   ========================================================= */

.card,
.container {
    position: relative;
    margin: 16px 0;
    padding: 20px;
    border: 1px solid var(--trx-border);
    border-radius: var(--trx-radius);
    background:
        linear-gradient(
            145deg,
            #111b30,
            #0d1528
        );
    box-shadow: var(--trx-shadow);
    overflow: hidden;
}

.card::before,
.container::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.08),
            transparent
        );
    pointer-events: none;
}

.card:hover {
    border-color: rgba(102,124,255,.25);
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 15px;
}

.row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
}

.stat {
    color: #fff;
    font-size: clamp(26px, 4vw, 36px);
    font-weight: 900;
    letter-spacing: -.04em;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn,
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 9px 15px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 11px;
    background:
        linear-gradient(
            135deg,
            var(--trx-primary),
            var(--trx-primary-2)
        );
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 8px 24px rgba(102,124,255,.16);
    transition:
        transform .15s ease,
        box-shadow .15s ease,
        filter .15s ease;
}

.btn:hover,
button:hover {
    color: #fff;
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 11px 28px rgba(102,124,255,.24);
}

.btn:active,
button:active {
    transform: translateY(0) scale(.985);
}

.btn.secondary,
button.secondary {
    background: #121d34;
    border-color: var(--trx-border);
    color: #cdd7ed;
    box-shadow: none;
}

.btn.danger,
button.danger {
    background:
        linear-gradient(
            135deg,
            #ff5d82,
            #d9476d
        );
}

.btn.success,
button.success {
    background:
        linear-gradient(
            135deg,
            #31cf9d,
            #1ea67d
        );
}

/* =========================================================
   FORMS
   ========================================================= */

label {
    display: block;
    margin: 9px 0 5px;
    color: #d9e2f5;
    font-size: 11px;
    font-weight: 800;
}

input,
select,
textarea {
    width: 100%;
    margin: 6px 0 14px;
    padding: 11px 12px;
    border: 1px solid rgba(137,158,211,.18);
    border-radius: 11px;
    outline: none;
    background: #091226;
    color: #fff;
    font: inherit;
    font-size: 13px;
    transition:
        border-color .14s ease,
        box-shadow .14s ease,
        background .14s ease;
}

input::placeholder,
textarea::placeholder {
    color: #596781;
}

input:hover,
select:hover,
textarea:hover {
    border-color: rgba(137,158,211,.30);
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(102,124,255,.62);
    background: #0b152a;
    box-shadow: 0 0 0 3px rgba(102,124,255,.08);
}

textarea {
    min-height: 110px;
    resize: vertical;
}

/* =========================================================
   TABLES
   ========================================================= */

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

th,
td {
    padding: 12px 11px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(137,158,211,.08);
}

th {
    color: #7584a2;
    background: rgba(6,11,24,.50);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}

td {
    color: #d6deef;
    font-size: 12px;
}

table tr:hover td {
    background: rgba(102,124,255,.035);
}

table tr:last-child td {
    border-bottom: 0;
}

/* =========================================================
   ALERTS
   ========================================================= */

.alert,
.note,
.success,
.danger {
    margin: 14px 0;
    padding: 12px 14px;
    border-radius: 11px;
    border: 1px solid var(--trx-border);
}

.alert {
    background: #15213b;
    color: #dfe7fa;
}

.alert.success,
.success {
    border-color: rgba(53,212,161,.18);
    background: rgba(53,212,161,.06);
    color: #bff4e4;
}

.alert.danger,
.danger {
    border-color: rgba(255,93,130,.18);
    background: rgba(255,93,130,.06);
    color: #ffc0cf;
}

.alert.warning,
.note {
    border-color: rgba(255,200,92,.18);
    background: rgba(255,200,92,.055);
    color: #ffe2a1;
}

/* =========================================================
   PRE / API
   ========================================================= */

pre {
    margin: 12px 0;
    padding: 15px;
    border: 1px solid rgba(137,158,211,.11);
    border-radius: 12px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    background: #050a15;
    color: #d7e0f6;
    font: 12px/1.65 ui-monospace, SFMono-Regular, Menlo,
        Monaco, Consolas, monospace;
}

code {
    padding: 2px 5px;
    border-radius: 6px;
    background: rgba(102,124,255,.08);
    color: #dce4ff;
    word-break: break-word;
}

.method {
    display: inline-block;
    padding: 3px 7px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 900;
}

.get {
    color: #9db4ff;
    background: rgba(102,124,255,.10);
}

.post {
    color: #93e9d2;
    background: rgba(53,212,161,.09);
}

.endpoint {
    margin-top: 10px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 850;
}

.badge-green {
    color: #98eed8;
    background: rgba(53,212,161,.08);
}

.badge-blue {
    color: #b2c0ff;
    background: rgba(102,124,255,.09);
}

/* =========================================================
   SERVICE / ORDER UI
   ========================================================= */

.order-info {
    display: none;
    margin-top: 12px;
    padding: 15px;
    border: 1px solid rgba(102,124,255,.15);
    border-radius: 14px;
    background: rgba(102,124,255,.04);
}

.order-info-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
}

.order-info-box {
    padding: 12px;
    border: 1px solid rgba(137,158,211,.08);
    border-radius: 10px;
    background: rgba(6,12,25,.45);
}

.order-info-label {
    display: block;
    color: #71809b;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.order-info-value {
    display: block;
    margin-top: 3px;
    color: #fff;
    font-size: 16px;
    font-weight: 850;
}

.estimated-charge {
    margin-top: 10px;
    padding: 11px 12px;
    border-radius: 10px;
    background: rgba(53,212,161,.05);
    color: #d2f7eb;
    font-size: 12px;
    font-weight: 800;
}

/* =========================================================
   AUTH / LOGIN
   ========================================================= */

.auth-page {
    width: min(520px, calc(100% - 24px));
    margin: 25px auto 0;
}

.auth-card {
    padding: 27px;
}

.auth-brand {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 15px;
    border-radius: 15px;
    background:
        linear-gradient(
            135deg,
            var(--trx-primary),
            var(--trx-primary-2)
        );
    font-size: 20px;
    font-weight: 950;
    box-shadow: 0 11px 30px rgba(102,124,255,.18);
}

/* =========================================================
   LOGIN LOGO
   ========================================================= */

.auth-brand.logo-brand {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.auth-brand.logo-brand img {
    width: auto;
    max-width: 190px;
    height: 70px;
    object-fit: contain;
    display: block;
}

/* =========================================================
   LANDING
   ========================================================= */

.landing-hero {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    align-items: center;
    gap: 24px;
    padding: 30px;
}

.landing-kicker {
    color: #9eabff;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.landing-title {
    margin: 9px 0 10px;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 950;
    letter-spacing: -.055em;
}

.landing-title span {
    background: linear-gradient(90deg,#fff,#bfc9ff,#a28cff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.landing-side {
    min-height: 180px;
    padding: 20px;
    border: 1px solid rgba(102,124,255,.16);
    border-radius: 16px;
    background: rgba(102,124,255,.045);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 13px;
}

.feature-card {
    padding: 17px;
    border: 1px solid var(--trx-border);
    border-radius: 15px;
    background: #0d1528;
}

.feature-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    margin-bottom: 11px;
    border-radius: 10px;
    background: rgba(102,124,255,.09);
}

/* =========================================================
   FOOTER
   ========================================================= */

.trx-footer {
    padding: 0 0 30px;
    color: #65738d;
}

.trx-footer-inner {
    width: min(1240px, calc(100% - 40px));
    margin: 0 auto;
    padding-top: 17px;
    border-top: 1px solid var(--trx-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-size: 10px;
}

.trx-footer-inner strong {
    display: inline-block;
    margin-right: 6px;
    color: #aab6d2;
}

.trx-footer-links {
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.trx-footer-links a {
    color: #71809b;
}

.trx-footer-links a:hover {
    color: #fff;
}

/* =========================================================
   MOTION
   ========================================================= */

@keyframes trxFade {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   PREMIUM DASHBOARD
   ========================================================= */

.trx-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 17px;
}

.trx-eyebrow {
    color: #929fff;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.trx-page-title {
    margin: 7px 0 7px;
    font-size: clamp(28px, 4vw, 43px);
    font-weight: 950;
    letter-spacing: -.05em;
}

.trx-page-title span {
    background: linear-gradient(90deg,#fff,#c5ceff,#9f8bff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.trx-page-subtitle {
    max-width: 700px;
    margin: 0;
    color: #7f8da8;
    font-size: 12px;
}

.trx-head-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.trx-hero-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding: 15px 17px;
    border: 1px solid rgba(102,124,255,.14);
    border-radius: 15px;
    background:
        linear-gradient(
            135deg,
            rgba(102,124,255,.07),
            rgba(120,97,255,.025)
        );
}

.trx-hero-strip strong {
    display: block;
    margin-top: 5px;
    color: #eaf0ff;
    font-size: 13px;
}

.trx-hero-strip p {
    margin: 3px 0 0;
    font-size: 10px;
}

.trx-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(53,212,161,.07);
    color: #8ee8d1;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .07em;
}

.trx-live-pill span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--trx-success);
}

.trx-hero-meta {
    min-width: 100px;
    padding-left: 16px;
    border-left: 1px solid var(--trx-border);
}

.trx-hero-meta span,
.trx-hero-meta strong {
    display: block;
}

.trx-hero-meta span {
    color: #687691;
    font-size: 9px;
}

.trx-hero-meta strong {
    margin-top: 4px;
    color: #fff;
    font-size: 17px;
}

.trx-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 13px;
    margin-bottom: 16px;
}

.trx-stat-card {
    position: relative;
    overflow: hidden;
    min-height: 145px;
    padding: 17px;
    border: 1px solid var(--trx-border);
    border-radius: 17px;
    background:
        linear-gradient(
            145deg,
            #111b30,
            #0d1528
        );
    box-shadow: 0 11px 30px rgba(0,0,0,.17);
    transition:
        transform .16s ease,
        border-color .16s ease;
}

.trx-stat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(102,124,255,.28);
}

.trx-stat-card::after {
    content: "";
    position: absolute;
    right: -50px;
    top: -50px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(102,124,255,.06);
}

.trx-stat-card.accent-success::after {
    background: rgba(53,212,161,.055);
}

.trx-stat-card.accent-warning::after {
    background: rgba(255,200,92,.055);
}

.trx-stat-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    margin-bottom: 13px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 11px;
    background: rgba(102,124,255,.08);
    color: #d2d9ff;
    font-size: 15px;
    font-weight: 900;
}

.accent-success .trx-stat-icon {
    background: rgba(53,212,161,.07);
    color: #9af0db;
}

.accent-warning .trx-stat-icon {
    background: rgba(255,200,92,.07);
    color: #ffe0a0;
}

.trx-stat-label {
    color: #7886a2;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.trx-stat-value {
    margin-top: 3px;
    color: #fff;
    font-size: clamp(23px, 3vw, 29px);
    line-height: 1.1;
    font-weight: 950;
    letter-spacing: -.04em;
}

.trx-stat-note {
    margin-top: 6px;
    color: #606e87;
    font-size: 9px;
}

.trx-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0,1.35fr) minmax(290px,.75fr);
    gap: 14px;
}

.trx-panel-card {
    overflow: hidden;
    border: 1px solid var(--trx-border);
    border-radius: 17px;
    background: #0d1528;
    box-shadow: 0 11px 30px rgba(0,0,0,.16);
}

.trx-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(137,158,211,.08);
}

.trx-panel-head h3 {
    margin: 0;
    font-size: 15px;
}

.trx-panel-head p {
    margin: 3px 0 0;
    color: #64718a;
    font-size: 9px;
}

.trx-panel-link {
    padding: 6px 8px;
    border-radius: 8px;
    color: #a5b1ff;
    background: rgba(102,124,255,.07);
    font-size: 9px;
    font-weight: 850;
}

.trx-order-list {
    padding: 5px 8px 8px;
}

.trx-order-row {
    display: grid;
    grid-template-columns: 37px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px 8px;
    border-bottom: 1px solid rgba(137,158,211,.06);
    transition:
        background .13s ease,
        transform .13s ease;
}

.trx-order-row:last-child {
    border-bottom: 0;
}

.trx-order-row:hover {
    background: rgba(102,124,255,.035);
    transform: translateX(2px);
}

.trx-order-icon {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(137,158,211,.09);
    border-radius: 10px;
    background: rgba(102,124,255,.055);
    color: #a9b3ff;
}

.trx-order-main {
    min-width: 0;
}

.trx-order-main strong {
    display: block;
    overflow: hidden;
    color: #e5ebfa;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trx-order-main small {
    display: block;
    margin-top: 3px;
    color: #5f6d85;
    font-size: 8px;
}

.trx-order-price {
    color: #fff;
    font-size: 11px;
    font-weight: 850;
}

.trx-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 3px 6px;
    border-radius: 999px;
    font-size: 7px;
    font-weight: 850;
}

.trx-status-pill::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
}

.status-success {
    color: #8be7d0;
    background: rgba(53,212,161,.07);
}

.status-success::before {
    background: var(--trx-success);
}

.status-processing {
    color: #b6c1ff;
    background: rgba(102,124,255,.08);
}

.status-processing::before {
    background: var(--trx-primary);
}

.status-pending {
    color: #f0d28f;
    background: rgba(255,200,92,.07);
}

.status-pending::before {
    background: var(--trx-warning);
}

.status-danger {
    color: #ff9eb4;
    background: rgba(255,93,130,.07);
}

.status-danger::before {
    background: var(--trx-danger);
}

.trx-empty-state {
    min-height: 230px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 7px;
    padding: 25px;
    text-align: center;
}

.trx-empty-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 3px;
    border-radius: 14px;
    background: rgba(102,124,255,.06);
    color: #acb6ff;
    font-size: 22px;
}

.trx-empty-state strong {
    color: #e9efff;
    font-size: 13px;
}

.trx-empty-state span {
    max-width: 250px;
    color: #66748e;
    font-size: 9px;
}

.trx-overview-body {
    padding: 15px;
}

.trx-balance-box {
    padding: 15px;
    margin-bottom: 12px;
    border: 1px solid rgba(102,124,255,.13);
    border-radius: 13px;
    background: rgba(102,124,255,.05);
}

.trx-balance-box span,
.trx-balance-box small {
    display: block;
    color: #74829e;
    font-size: 9px;
}

.trx-balance-box strong {
    display: block;
    margin: 4px 0 1px;
    color: #fff;
    font-size: 24px;
    font-weight: 950;
    letter-spacing: -.04em;
}

.trx-overview-list {
    display: grid;
    gap: 6px;
}

.trx-overview-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid rgba(137,158,211,.06);
    border-radius: 9px;
    background: rgba(255,255,255,.012);
}

.trx-overview-list span {
    color: #72809b;
    font-size: 9px;
}

.trx-overview-list strong {
    color: #e4eaf8;
    font-size: 9px;
}

.trx-quick-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 6px;
    margin-top: 10px;
}

.trx-quick-grid a {
    display: grid;
    place-items: center;
    min-height: 38px;
    padding: 5px;
    border: 1px solid rgba(137,158,211,.07);
    border-radius: 9px;
    background: rgba(255,255,255,.015);
    color: #aeb9d3;
    font-size: 8px;
    font-weight: 800;
}

.trx-quick-grid a:hover {
    color: #fff;
    background: rgba(102,124,255,.07);
    border-color: rgba(102,124,255,.23);
}

/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .trx-stat-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .trx-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {

    :root {
        --trx-sidebar: 242px;
    }

    .trx-topbar {
        padding-left: 16px;
        padding-right: 16px;
    }

    .trx-sidebar {
        box-shadow: 18px 0 55px rgba(0,0,0,.40);
    }

    .grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .landing-hero {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 760px) {

    body {
        min-width: 0;
    }

    /* Mobile sidebar */

    .trx-sidebar {
        transform: translateX(-104%);
        transition: transform .18s ease-out;
        width: min(280px, 84vw);
    }

    .trx-nav-toggle:checked ~ .trx-app .trx-sidebar {
        transform: translateX(0);
    }

    .trx-sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 90;
        display: block;
        background: rgba(0,0,0,.48);
        opacity: 0;
        pointer-events: none;
        transition: opacity .18s ease-out;
    }

    .trx-nav-toggle:checked ~ .trx-app .trx-sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    .trx-main {
        width: 100%;
        margin-left: 0;
    }

    /* Mobile topbar */

    .trx-topbar {
        min-height: 64px;
        padding: 10px 12px;
        gap: 8px;
    }

    .trx-topbar-left {
        min-width: 0;
        gap: 8px;
    }

    .trx-topbar-right {
        gap: 6px;
    }

    .trx-menu-button {
        display: flex;
        flex: 0 0 40px;
    }

    .trx-topbar-brand {
        display: flex;
        align-items: center;
        min-width: 0;
        overflow: hidden;
        font-size: 14px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .trx-topbar-support {
        display: none;
    }

    .trx-topbar-login {
        min-height: 38px;
        padding: 7px 12px;
        font-size: 10px;
    }

    .trx-topbar-user {
        max-width: 125px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Main */

    .wrap {
        width: calc(100% - 20px);
        padding: 18px 0 28px;
    }

    .grid,
    .feature-grid,
    .row {
        grid-template-columns: 1fr;
    }

    .card,
    .container {
        margin: 12px 0;
        padding: 16px;
        border-radius: 15px;
    }

    /* Tables */

    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    /* Order */

    .order-info-grid {
        grid-template-columns: 1fr;
    }

    /* Landing */

    .landing-hero {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    /* Dashboard */

    .trx-page-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .trx-head-actions {
        width: 100%;
    }

    .trx-head-actions .btn {
        flex: 1;
    }

    .trx-hero-strip {
        flex-direction: column;
        align-items: flex-start;
    }

    .trx-hero-meta {
        width: 100%;
        padding: 10px 0 0;
        border-left: 0;
        border-top: 1px solid var(--trx-border);
    }

    .trx-stat-grid {
        grid-template-columns: 1fr 1fr;
    }

    .trx-quick-grid {
        grid-template-columns: repeat(2,1fr);
    }

    /* Footer */

    .trx-footer-inner {
        width: calc(100% - 20px);
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================================
   RESPONSIVE — SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

    /* Header */

    .trx-topbar {
        min-height: 60px;
        padding: 9px 10px;
    }

    .trx-menu-button {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .trx-topbar-brand {
        font-size: 13px;
    }

    .trx-topbar-login {
        min-height: 36px;
        padding: 6px 11px;
    }

    /* Content */

    .wrap {
        width: calc(100% - 16px);
        padding-top: 16px;
    }

    /* Login page */

    .auth-page {
        width: calc(100% - 8px);
        margin: 10px auto 0;
    }

    .auth-card {
        padding: 20px 17px 18px;
        margin-top: 10px;
        border-radius: 16px;
    }

    /*
     * Login logo:
     * Keeps logo centered without becoming oversized.
     */

    .auth-brand.logo-brand {
        width: 100%;
        height: 66px;
        margin-bottom: 13px;
    }

    .auth-brand.logo-brand img {
        width: auto;
        max-width: 145px;
        height: 58px;
        object-fit: contain;
    }

    /* Login headings */

    .auth-card h1 {
        margin-bottom: 8px;
        font-size: 29px;
        line-height: 1.15;
    }

    .auth-card h2 {
        font-size: 23px;
    }

    .auth-card p {
        font-size: 12px;
        line-height: 1.55;
    }

    /* Login fields */

    .auth-card label {
        margin-top: 12px;
        font-size: 11px;
    }

    .auth-card input,
    .auth-card select,
    .auth-card textarea {
        min-height: 50px;
        margin-bottom: 10px;
        padding: 12px 13px;
        border-radius: 12px;
        font-size: 13px;
    }

    /* Login button */

    .auth-card .btn,
    .auth-card button {
        width: 100%;
        min-height: 50px;
        margin-top: 4px;
        border-radius: 13px;
        font-size: 13px;
    }

    /* Dashboard */

    .trx-stat-grid {
        grid-template-columns: 1fr;
    }

    .trx-page-title {
        font-size: 29px;
    }

    .trx-order-row {
        grid-template-columns: 35px minmax(0,1fr);
    }

    .trx-order-price {
        grid-column: 2;
    }

    .trx-quick-grid {
        grid-template-columns: repeat(2,1fr);
    }

    /* Footer */

    .trx-footer {
        padding-bottom: 22px;
    }

    .trx-footer-inner {
        font-size: 9px;
    }
}

/* =========================================================
   EXTRA SMALL DEVICES
   ========================================================= */

@media (max-width: 360px) {

    .trx-topbar {
        padding-left: 8px;
        padding-right: 8px;
    }

    .trx-topbar-brand {
        font-size: 12px;
    }

    .trx-topbar-login {
        padding-left: 9px;
        padding-right: 9px;
        font-size: 9px;
    }

    .auth-page {
        width: calc(100% - 4px);
    }

    .auth-card {
        padding: 18px 14px 17px;
    }

    .auth-brand.logo-brand {
        height: 60px;
    }

    .auth-brand.logo-brand img {
        max-width: 130px;
        height: 54px;
    }

    .auth-card h1 {
        font-size: 27px;
    }
}

/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   MOBILE SAFETY
   ========================================================= */

button,
.btn,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid rgba(102,124,255,.65);
    outline-offset: 2px;
}

/* =========================================================
   TRX EDITION — MAINTENANCE UI
   Lightweight / no heavy animation
   ========================================================= */

.trx-maintenance-body {
    min-height: 100vh;
}

.trx-maintenance-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.trx-maintenance-card {
    width: min(560px, 100%);
    padding: 30px;
    text-align: center;
    border: 1px solid var(--trx-border);
    border-radius: 20px;
    background: linear-gradient(145deg, #111b30, #0d1528);
    box-shadow: var(--trx-shadow);
}

.trx-maintenance-mark {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
    border-radius: 17px;
    background: linear-gradient(135deg, var(--trx-primary), var(--trx-primary-2));
    color: #fff;
    font-size: 26px;
    font-weight: 950;
    box-shadow: 0 12px 30px rgba(102,124,255,.18);
}

.trx-maintenance-card h1 {
    margin: 8px 0 10px;
    font-size: clamp(28px, 5vw, 40px);
}

.trx-maintenance-card p {
    max-width: 430px;
    margin: 0 auto;
    color: #7f8da8;
    font-size: 12px;
}

.trx-maintenance-status {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 18px auto 0;
    padding: 7px 10px;
    border: 1px solid rgba(255,200,92,.14);
    border-radius: 999px;
    background: rgba(255,200,92,.05);
    color: #e9cf92;
    font-size: 9px;
    font-weight: 850;
}

.trx-maintenance-status span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--trx-warning);
}

.trx-maintenance-links {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.trx-maintenance-admin-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.trx-maintenance-admin-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}

.trx-maintenance-admin-pill span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.trx-maintenance-admin-pill.is-on {
    color: #93ead3;
    background: rgba(53,212,161,.07);
}

.trx-maintenance-admin-pill.is-on span {
    background: var(--trx-success);
    box-shadow: 0 0 9px rgba(53,212,161,.45);
}

.trx-maintenance-admin-pill.is-off {
    color: #7f8da8;
    background: rgba(255,255,255,.03);
}

.trx-maintenance-admin-pill.is-off span {
    background: #66748f;
}

.trx-maintenance-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 560px) {
    .trx-maintenance-page {
        padding: 16px;
    }

    .trx-maintenance-card {
        padding: 22px 18px;
        border-radius: 16px;
    }

    .trx-maintenance-admin-head {
        flex-direction: column;
    }

    .trx-maintenance-actions .btn {
        width: 100%;
    }
}


/* =========================================================
   TRX EDITION — COMPACT MOBILE SERVICE CATALOG
   Keeps the full desktop table; mobile uses a dense card-like row.
   ========================================================= */
.trx-services-table { width:100%; table-layout:fixed; }
.trx-services-table th,
.trx-services-table td { vertical-align:middle; }
.trx-category-pill {
    display:inline-block;
    max-width:150px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    padding:4px 7px;
    border:1px solid rgba(102,124,255,.14);
    border-radius:999px;
    font-size:9px;
    color:#aeb9d3;
    background:rgba(102,124,255,.045);
}
.trx-service-name { overflow-wrap:anywhere; }
.trx-service-order .btn { white-space:nowrap; }

@media (max-width:760px) {
    .trx-services-search {
        align-items:stretch !important;
        gap:7px !important;
    }
    .trx-services-search > div { min-width:0; }
    .trx-services-search .btn {
        margin-bottom:0 !important;
        min-height:42px;
        padding:8px 11px;
        font-size:10px;
    }

    .trx-services-table {
        display:table;
        width:100%;
        table-layout:fixed;
        white-space:normal;
    }
    .trx-services-table th,
    .trx-services-table td {
        padding:7px 5px;
        font-size:9px;
        line-height:1.25;
        border-bottom:1px solid rgba(137,158,211,.055);
    }
    .trx-services-table th { font-size:8px; }

    /* Remove low-priority columns so the complete service row fits the phone width. */
    .trx-services-table th:first-child,
    .trx-services-table td:first-child,
    .trx-services-table th:nth-child(4),
    .trx-services-table td:nth-child(4),
    .trx-services-table th:nth-child(5),
    .trx-services-table td:nth-child(5) { display:none; }

    .trx-services-table th:nth-child(2) { width:54%; }
    .trx-services-table th:nth-child(3) { width:22%; }
    .trx-services-table th:nth-child(6) { width:24%; }

    .trx-services-table .trx-service-name {
        font-size:9px;
        font-weight:700;
    }
    .trx-services-table .trx-service-name strong {
        display:block;
        max-height:2.5em;
        overflow:hidden;
    }
    .trx-services-table td:nth-child(3) strong {
        font-size:9px;
        white-space:nowrap;
    }
    .trx-services-table .trx-service-order .btn {
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-height:31px;
        padding:5px 8px;
        border-radius:8px;
        font-size:9px;
    }

    /* Avoid the generic horizontal table scroller on this page. */
    .trx-services-table + * { max-width:100%; }
}

@media (max-width:430px) {
    .trx-services-table th,
    .trx-services-table td { padding:6px 4px; }
    .trx-services-table th:nth-child(2) { width:56%; }
    .trx-services-table th:nth-child(3) { width:20%; }
    .trx-services-table th:nth-child(6) { width:24%; }
    .trx-services-table .trx-service-name,
    .trx-services-table td:nth-child(3) strong { font-size:8.5px; }
    .trx-services-table .trx-service-order .btn {
        min-height:29px;
        padding:4px 7px;
        font-size:8px;
    }
}

/* =========================================================
   TRX EDITION — LUXURY NEON UI REFRESH
   UI-only layer. Existing forms, routes, handlers and data remain intact.
   ========================================================= */
:root {
    --trx-bg: #050611;
    --trx-bg-2: #090817;
    --trx-panel: #0d0b1b;
    --trx-panel-2: #121027;
    --trx-border: rgba(209, 128, 255, .16);
    --trx-border-strong: rgba(239, 67, 186, .46);
    --trx-text: #f8f3ff;
    --trx-muted: #a29ab8;
    --trx-primary: #f52aa5;
    --trx-primary-2: #8b5cf6;
    --trx-success: #37e6bd;
    --trx-danger: #ff5e91;
    --trx-warning: #ffc86a;
    --trx-radius: 18px;
    --trx-shadow: 0 18px 48px rgba(0,0,0,.32);
}

html { background: #050611; }
body:not(.trx-welcome-body):not(.trx-maintenance-body) {
    background:
        radial-gradient(ellipse at 8% -10%, rgba(226, 35, 156, .105), transparent 31%),
        radial-gradient(ellipse at 98% 8%, rgba(139, 92, 246, .12), transparent 27%),
        radial-gradient(ellipse at 50% 115%, rgba(74, 25, 130, .10), transparent 42%),
        linear-gradient(145deg, #050611 0%, #090817 48%, #080612 100%);
}
::selection { background: rgba(245,42,165,.34); color: #fff; }
a { color: #e3b8ff; }
a:hover { color: #fff; }

/* Shared shell / navigation */
.trx-sidebar {
    background: linear-gradient(180deg, rgba(12,9,27,.985), rgba(7,7,18,.99));
    border-right-color: rgba(210,128,255,.14);
    box-shadow: 18px 0 58px rgba(0,0,0,.28), inset -1px 0 0 rgba(255,255,255,.015);
}
.trx-sidebar-brand { border-bottom: 1px solid rgba(220,145,255,.075); margin-bottom: 12px; }
.trx-logo-mark {
    background: linear-gradient(140deg, #ff3eb5, #9e54f7 68%, #6b40cc);
    box-shadow: 0 8px 25px rgba(245,42,165,.24);
}
.trx-logo small { color: #9c8bb6; }
.trx-user-card,
.trx-support-mini {
    border-color: rgba(197,107,255,.14);
    background: linear-gradient(145deg, rgba(34,18,51,.66), rgba(13,10,28,.75));
}
.trx-avatar {
    color: #ffe5fa;
    background: linear-gradient(145deg, rgba(245,42,165,.22), rgba(139,92,246,.22));
    border: 1px solid rgba(236,123,255,.20);
}
.trx-nav-label { color: #8b759f; }
.trx-side-link { color: #a49bb9; }
.trx-side-link:hover {
    color: #fff;
    border-color: rgba(227,117,255,.12);
    background: linear-gradient(100deg, rgba(245,42,165,.10), rgba(139,92,246,.075));
}
.trx-side-link.active {
    color: #fff;
    border-color: rgba(240,88,196,.25);
    background: linear-gradient(105deg, rgba(245,42,165,.20), rgba(139,92,246,.12));
    box-shadow: inset 3px 0 0 #f747b6, 0 7px 22px rgba(139,48,190,.09);
}
.trx-side-icon { color: #ef8de0; }
.trx-online-dot, .trx-topbar-status {
    background: #37e6bd;
    box-shadow: 0 0 12px rgba(55,230,189,.65);
}
.trx-support-mini-title { color: #f4d6ff; }
.trx-support-btn { border-color: rgba(202,111,255,.14); color: #c7b4da; }
.trx-support-btn:hover { background: rgba(245,42,165,.10); border-color: rgba(245,42,165,.32); }
.trx-topbar {
    background: rgba(8,7,20,.88);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-bottom-color: rgba(197,128,255,.13);
}
.trx-menu-button { background: rgba(26,17,44,.86); border-color: rgba(204,128,255,.19); }
.trx-topbar-brand { color: #fff; }
.trx-topbar-support, .trx-topbar-login, .trx-topbar-user {
    background: rgba(23,14,38,.74);
    border-color: rgba(199,120,255,.16);
}
.trx-topbar-support:hover, .trx-topbar-login:hover { background: rgba(245,42,165,.10); border-color: rgba(245,42,165,.32); }
.trx-topbar-support span { color: #fa70ca; }
.trx-main { min-width: 0; }

/* Typography, containers, buttons and inputs shared by customer/admin pages */
h1, h2, h3, h4 { color: #fff7ff; }
p { color: #d4c8e7; }
.muted { color: #a198b5 !important; }
small { color: #9c91b0; }
.card, .container {
    border-color: rgba(206,126,255,.15);
    background: linear-gradient(145deg, rgba(23,15,38,.94), rgba(10,9,23,.96));
    box-shadow: 0 16px 42px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.025);
}
.card::before, .container::before { background: linear-gradient(90deg, transparent, rgba(255,100,206,.25), rgba(169,119,255,.17), transparent); }
.card:hover { border-color: rgba(240,93,202,.25); }
.btn, button {
    border-color: rgba(255,255,255,.09);
    background: linear-gradient(105deg, #f52aa5 0%, #c13bd4 54%, #8657f5 100%);
    color: #fff;
    box-shadow: 0 9px 26px rgba(210,38,159,.20), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn:hover, button:hover { box-shadow: 0 12px 30px rgba(210,38,159,.27), 0 0 0 1px rgba(226,116,255,.09); }
.btn.secondary, button.secondary {
    background: linear-gradient(145deg, rgba(35,23,53,.92), rgba(18,14,33,.95));
    border-color: rgba(205,128,255,.19);
    color: #eadcf8;
}
.btn.danger, button.danger { background: linear-gradient(110deg, #fb507e, #c52a72); }
.btn.success, button.success { background: linear-gradient(110deg, #28d7a5, #118c9b); }
label { color: #e5d9f2; }
input, select, textarea {
    border-color: rgba(195,134,255,.19);
    background: rgba(8,8,22,.82);
    color: #fff8ff;
}
input::placeholder, textarea::placeholder { color: #786d8d; }
input:hover, select:hover, textarea:hover { border-color: rgba(232,103,206,.36); }
input:focus, select:focus, textarea:focus {
    border-color: rgba(247,67,177,.69);
    background: #100b22;
    box-shadow: 0 0 0 3px rgba(245,42,165,.10), 0 0 19px rgba(158,70,226,.075);
}
.alert { background: rgba(26,18,43,.88); border-color: rgba(205,128,255,.16); }
.alert.success, .success { border-color: rgba(55,230,189,.23); background: rgba(55,230,189,.07); color: #c4ffef; }
.alert.danger, .danger { border-color: rgba(255,94,145,.25); background: rgba(255,94,145,.075); color: #ffd1e0; }
.alert.warning, .note { border-color: rgba(255,200,106,.22); background: rgba(255,200,106,.065); color: #ffe9bd; }
table { border-color: rgba(200,128,255,.10); }
th { color: #b7a1cf; background: rgba(20,12,33,.9); }
td { color: #e0d7ed; }
th, td { border-bottom-color: rgba(202,137,255,.09); }
table tr:hover td { background: rgba(245,42,165,.035); }
pre { background: #070611; border-color: rgba(202,128,255,.14); }
code { background: rgba(245,42,165,.09); color: #ffc9ef; }
.badge-blue, .get { color: #f1b1ff; background: rgba(180,87,241,.13); }
.order-info { border-color: rgba(209,113,255,.22); background: rgba(164,61,190,.065); }
.order-info-box { border-color: rgba(205,128,255,.12); background: rgba(10,7,23,.56); }
.estimated-charge { background: rgba(55,230,189,.07); color: #c8fff0; }

/* Premium dashboard cards and motion */
.trx-page-head { align-items: center; }
.trx-eyebrow { color: #e77ecb; }
.trx-page-title span {
    background: linear-gradient(95deg, #fff1fb 0%, #ff69c3 42%, #b78aff 85%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.trx-page-subtitle { color: #a096b4; }
.trx-hero-strip {
    position: relative;
    overflow: hidden;
    border-color: rgba(240,91,199,.23);
    background:
        radial-gradient(ellipse at 90% 50%, rgba(156,68,237,.24), transparent 38%),
        radial-gradient(ellipse at 5% 0%, rgba(245,42,165,.15), transparent 40%),
        linear-gradient(112deg, rgba(35,16,48,.96), rgba(13,10,28,.97));
    box-shadow: 0 13px 35px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.035);
}
.trx-hero-strip::after {
    content: "✦";
    position: absolute; right: 23px; top: -22px;
    color: rgba(255,113,209,.16); font-size: 120px; line-height: 1;
    transform: rotate(12deg); pointer-events: none;
}
.trx-hero-strip strong { color: #fff2fd; }
.trx-live-pill { color: #8af2d8; background: rgba(55,230,189,.08); }
.trx-stat-card, .trx-panel-card {
    border-color: rgba(204,128,255,.14);
    background: linear-gradient(150deg, rgba(23,15,39,.96), rgba(10,9,24,.96));
    box-shadow: 0 13px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.022);
}
.trx-stat-card:hover { border-color: rgba(239,79,187,.35); box-shadow: 0 16px 38px rgba(0,0,0,.25), 0 0 22px rgba(207,48,165,.055); }
.trx-stat-card::after { background: rgba(245,42,165,.09); }
.trx-stat-card.accent-success::after { background: rgba(55,230,189,.065); }
.trx-stat-card.accent-warning::after { background: rgba(255,200,106,.07); }
.trx-stat-icon { color: #ffc6ee; border-color: rgba(245,42,165,.17); background: rgba(245,42,165,.09); }
.accent-success .trx-stat-icon { color: #aff7e5; background: rgba(55,230,189,.08); }
.accent-warning .trx-stat-icon { color: #ffe5b1; background: rgba(255,200,106,.08); }
.trx-stat-label { color: #afa1c3; }
.trx-stat-note { color: #847895; }
.trx-panel-head { border-bottom-color: rgba(202,128,255,.10); }
.trx-panel-head p { color: #9586a9; }
.trx-panel-link { color: #ffc0e8; background: rgba(245,42,165,.10); }
.trx-order-row { border-bottom-color: rgba(202,128,255,.075); }
.trx-order-row:hover { background: rgba(245,42,165,.035); }
.trx-order-icon { color: #fbb9ec; background: rgba(245,42,165,.09); border-color: rgba(245,42,165,.16); }
.trx-order-price { color: #fff1ff; }
.trx-balance-box { border-color: rgba(245,42,165,.21); background: radial-gradient(ellipse at 90% 0%, rgba(139,92,246,.18), transparent 55%), linear-gradient(140deg, rgba(70,21,65,.56), rgba(19,12,36,.85)); }
.trx-quick-grid a { border-color: rgba(202,128,255,.13); background: rgba(24,15,41,.74); color: #dccbec; }
.trx-quick-grid a:hover { border-color: rgba(245,42,165,.28); background: rgba(245,42,165,.075); }
.trx-footer { color: #9281a6; }
.trx-footer-inner { border-top-color: rgba(202,128,255,.13); }
.trx-footer-inner strong { color: #e8d9f3; }
.trx-footer-links a { color: #a291b5; }
.trx-route-loader-card { border-color: rgba(219,116,255,.18); background: rgba(14,9,27,.96); box-shadow: 0 22px 60px rgba(0,0,0,.42); }
.trx-loader-ring { border-top-color: #f52aa5; border-right-color: #9b5cf6; }

/* Login and registration — premium split-screen surface */
body.trx-auth-route { min-height: 100vh; }
body.trx-auth-route .trx-sidebar,
body.trx-auth-route .trx-sidebar-overlay,
body.trx-auth-route .trx-topbar,
body.trx-auth-route .trx-footer,
body.trx-auth-route #trxNavToggle,
body.trx-auth-route .trx-route-loader { display: none !important; }
body.trx-auth-route .trx-app { min-height: 100vh; }
body.trx-auth-route .trx-main { width: 100%; min-height: 100vh; margin: 0; }
body.trx-auth-route .wrap { width: 100%; max-width: none; margin: 0; padding: 0; animation: none; }
.auth-page-premium {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .98fr);
    width: 100%; min-height: 100vh; min-height: 100svh;
    overflow: hidden;
    background: #070611;
}
.auth-form-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh; min-height: 100svh;
    padding: clamp(22px, 3.4vw, 48px) clamp(22px, 5.8vw, 86px) 22px;
    background:
        radial-gradient(ellipse at 0% 100%, rgba(139,92,246,.085), transparent 35%),
        radial-gradient(ellipse at 100% 0%, rgba(245,42,165,.06), transparent 35%),
        linear-gradient(150deg, #0b0918, #080713 60%, #080611);
    border-right: 1px solid rgba(206,124,255,.16);
}
.auth-form-panel::before {
    content: ""; position: absolute; z-index: -1; left: -170px; bottom: -190px;
    width: 390px; height: 390px; border-radius: 50%;
    border: 1px solid rgba(190,93,247,.12);
    box-shadow: 0 0 90px rgba(180,59,202,.05), inset 0 0 60px rgba(245,42,165,.035);
    pointer-events: none;
}
.auth-brand-lockup { display: inline-flex; align-items: center; gap: 12px; width: fit-content; color: #fff; }
.auth-brand-lockup:hover { color: #fff; }
.auth-brand-logo {
    display: grid; place-items: center; flex: 0 0 50px; width: 50px; height: 50px;
    overflow: hidden; border-radius: 15px; border: 1px solid rgba(243,105,205,.24);
    background: linear-gradient(140deg, rgba(245,42,165,.18), rgba(139,92,246,.17));
    box-shadow: 0 8px 27px rgba(209,40,157,.13), inset 0 1px 0 rgba(255,255,255,.07);
}
.auth-brand-logo img { display: block; width: 43px; height: 43px; object-fit: contain; }
.auth-brand-copy strong { display: block; color: #fff4fd; font-size: 14px; font-weight: 950; letter-spacing: .07em; }
.auth-brand-copy small { display: block; margin-top: 3px; color: #a897ba; font-size: 8px; font-weight: 850; letter-spacing: .2em; }
.auth-form-content { width: min(100%, 430px); margin: auto; padding: clamp(34px, 5vh, 60px) 0 34px; }
.auth-kicker {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 13px;
    color: #eaa0d8; font-size: 9px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase;
}
.auth-kicker-dot { width: 6px; height: 6px; border-radius: 50%; background: #ff5fbe; box-shadow: 0 0 13px rgba(255,95,190,.85); }
.auth-heading { margin: 0; color: #fff7ff; font-size: clamp(31px, 3.35vw, 45px); line-height: 1.07; letter-spacing: -.055em; font-weight: 900; }
.auth-heading span { color: transparent; background: linear-gradient(100deg, #ff76c9, #c994ff); -webkit-background-clip: text; background-clip: text; }
.auth-description { max-width: 370px; margin: 13px 0 26px; color: #a99bb8; font-size: 12px; line-height: 1.8; }
.auth-form { margin: 0; }
.auth-form label { margin: 15px 0 7px; color: #ddd0eb; font-size: 10px; font-weight: 800; letter-spacing: .015em; }
.auth-label-note { float: right; color: #8f7ca4; font-size: 9px; font-weight: 700; }
.auth-input-shell {
    position: relative; display: flex; align-items: center; width: 100%; min-height: 49px;
    border: 1px solid rgba(190,128,230,.18); border-radius: 13px;
    background: rgba(8,7,20,.74); transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.auth-input-shell:focus-within { border-color: rgba(246,74,184,.63); background: rgba(16,9,29,.95); box-shadow: 0 0 0 3px rgba(245,42,165,.075), 0 0 22px rgba(169,67,224,.06); }
.auth-input-icon { display: grid; place-items: center; flex: 0 0 40px; width: 40px; color: #f17bc8; font-size: 15px; }
.auth-input-shell input {
    width: 100%; min-width: 0; min-height: 47px; margin: 0; padding: 12px 13px 12px 0;
    border: 0; border-radius: 0 12px 12px 0; outline: none; background: transparent;
    color: #fff5ff; font-size: 12px; box-shadow: none !important;
}
.auth-input-shell input::placeholder { color: #716680; }
.auth-input-shell input:hover, .auth-input-shell input:focus { border: 0; background: transparent; }
.auth-submit {
    width: 100%; min-height: 49px; margin-top: 22px; padding: 12px 17px;
    border: 1px solid rgba(255,255,255,.14); border-radius: 13px;
    background: linear-gradient(100deg, #f52aa5 0%, #d63abf 48%, #9452f6 100%);
    box-shadow: 0 10px 27px rgba(205,37,155,.20), inset 0 1px 0 rgba(255,255,255,.19);
    font-size: 12px; font-weight: 900; letter-spacing: .01em;
}
.auth-submit span { margin-left: auto; font-size: 17px; }
.auth-submit:hover { box-shadow: 0 12px 32px rgba(205,37,155,.3), 0 0 23px rgba(153,74,226,.13); }
.auth-submit.is-loading { opacity: .82; }
.auth-switchline { margin-top: 20px; text-align: center; color: #9b8cab; font-size: 11px; }
.auth-switchline a { margin-left: 4px; color: #ff8bd2; font-weight: 850; }
.auth-switchline a:hover { color: #fff; }
.auth-assurance { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; color: #81748f; font-size: 9px; font-weight: 750; letter-spacing: .035em; }
.auth-assurance > span { color: #f979c7; }
.auth-assurance i { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: #755d87; }
.auth-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #6f647e; font-size: 8px; letter-spacing: .09em; }
.auth-footer-links { display: flex; gap: 12px; letter-spacing: 0; }
.auth-footer-links a { color: #9684a8; }
.auth-footer-links a:hover { color: #ff9ad8; }
.auth-alert { font-size: 11px; }

/* Right-hand animated artwork: custom CSS/HTML, no external dependencies */
.auth-art-panel {
    position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 0; min-height: 100vh; min-height: 100svh; padding: clamp(22px, 3vw, 40px);
    overflow: hidden; text-align: center;
    background:
        radial-gradient(ellipse at 49% 36%, rgba(236,43,173,.20), transparent 36%),
        radial-gradient(ellipse at 88% 20%, rgba(132,67,245,.21), transparent 31%),
        radial-gradient(ellipse at 13% 90%, rgba(101,44,168,.15), transparent 34%),
        linear-gradient(150deg, #0c0719, #0a0717 53%, #070611);
}
.auth-art-panel::before {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: .20; pointer-events: none;
    background-image: linear-gradient(rgba(235,181,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(235,181,255,.12) 1px, transparent 1px);
    background-size: 39px 39px; -webkit-mask-image: radial-gradient(ellipse at center, #000 3%, transparent 77%); mask-image: radial-gradient(ellipse at center, #000 3%, transparent 77%);
}
.auth-art-panel::after {
    content: ""; position: absolute; z-index: -1; width: min(65vw, 560px); aspect-ratio: 1; border-radius: 50%;
    border: 1px solid rgba(247,104,213,.14); box-shadow: 0 0 80px rgba(205,50,191,.09), inset 0 0 80px rgba(143,70,239,.055);
    animation: authOrbitPulse 7s ease-in-out infinite alternate; pointer-events: none;
}
.auth-art-orbit { position: absolute; z-index: -1; border-radius: 50%; border: 1px solid rgba(225,107,228,.14); pointer-events: none; }
.auth-art-orbit-one { width: min(38vw, 310px); aspect-ratio: 1; right: -10%; top: 10%; box-shadow: 0 0 44px rgba(234,47,173,.06); animation: authOrbitPulse 8s ease-in-out infinite alternate; }
.auth-art-orbit-two { width: min(49vw, 400px); aspect-ratio: 1; bottom: -9%; left: -14%; border-color: rgba(153,94,249,.16); animation: authOrbitPulse 10s ease-in-out infinite alternate-reverse; }
.auth-art-stars { position: absolute; top: 8%; right: 8%; color: rgba(255,177,235,.56); font-size: 13px; letter-spacing: .25em; }
.auth-art-topline { position: absolute; top: 29px; left: 25px; display: flex; align-items: center; gap: 8px; color: #b7a1cb; font-size: 8px; font-weight: 850; letter-spacing: .14em; }
.auth-art-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #37e6bd; box-shadow: 0 0 9px rgba(55,230,189,.8); }
.auth-art-stage { position: relative; width: min(100%, 390px); height: clamp(235px, 36vh, 360px); display: grid; place-items: center; margin-top: 28px; }
.auth-phone-glow { position: absolute; width: 205px; height: 205px; border-radius: 50%; background: radial-gradient(circle, rgba(235,42,177,.26), rgba(139,92,246,.1) 50%, transparent 70%); filter: blur(10px); animation: authGlowBreathe 4s ease-in-out infinite; }
.auth-phone-mockup {
    position: relative; z-index: 2; width: 157px; height: 270px; padding: 7px; border-radius: 28px;
    border: 1px solid rgba(255,176,236,.54); background: linear-gradient(145deg, #251338, #0e0a1b 55%, #2b1040);
    box-shadow: 0 24px 58px rgba(0,0,0,.45), 0 0 25px rgba(245,42,165,.24), inset 0 1px 0 rgba(255,255,255,.12);
    transform: rotate(-8deg); animation: authPhoneFloat 6s ease-in-out infinite;
}
.auth-phone-speaker { position: absolute; z-index: 2; top: 9px; left: 50%; width: 39px; height: 5px; border-radius: 999px; transform: translateX(-50%); background: #070610; box-shadow: inset 0 1px 1px rgba(255,255,255,.06); }
.auth-phone-screen { position: relative; display: flex; flex-direction: column; align-items: center; height: 100%; padding: 35px 9px 10px; overflow: hidden; border-radius: 22px; background: radial-gradient(ellipse at 50% 15%, rgba(244,55,180,.24), transparent 45%), linear-gradient(160deg, #100b24, #080713); }
.auth-phone-crown { color: #ffb4e5; font-size: 28px; line-height: 1; text-shadow: 0 0 17px rgba(255,93,199,.5); }
.auth-phone-brand { margin-top: 12px; color: #fff3fc; font-size: 12px; font-weight: 950; letter-spacing: .05em; }
.auth-phone-subtitle { margin-top: 3px; color: #d8addc; font-size: 7px; font-weight: 850; letter-spacing: .22em; }
.auth-phone-mini-row { display: flex; gap: 9px; margin-top: 21px; }
.auth-phone-mini-row span { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(255,139,218,.22); border-radius: 9px; background: rgba(245,42,165,.12); color: #ffc9ed; font-size: 13px; }
.auth-phone-mini-bar { width: 83%; height: 5px; margin-top: 19px; border-radius: 99px; background: linear-gradient(90deg, #f52aa5, #9e62f5); opacity: .8; }
.auth-phone-mini-bar.short { width: 51%; margin-top: 8px; opacity: .44; }
.auth-phone-mini-card { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 19px; padding: 10px 7px; border: 1px solid rgba(232,124,234,.16); border-radius: 10px; background: rgba(245,42,165,.055); color: #ccb9dc; font-size: 7px; }
.auth-phone-mini-card span:first-child { color: #ff83d0; font-size: 13px; }
.auth-social-float { position: absolute; z-index: 3; display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid rgba(255,185,238,.30); border-radius: 14px; background: linear-gradient(145deg, rgba(43,20,64,.92), rgba(15,9,31,.93)); color: #ffd4f2; font-size: 19px; font-weight: 900; box-shadow: 0 12px 29px rgba(0,0,0,.27), 0 0 19px rgba(200,56,186,.12); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); animation: authSocialFloat 5s ease-in-out infinite; }
.auth-social-instagram { top: 19%; left: 5%; color: #ff8bcd; }
.auth-social-youtube { top: 44%; left: 1%; color: #ff638e; animation-delay: -1.1s; }
.auth-social-facebook { top: 24%; right: 5%; color: #c1b1ff; animation-delay: -2s; }
.auth-social-telegram { right: 4%; bottom: 25%; color: #8edcff; animation-delay: -2.8s; }
.auth-social-tiktok { left: 14%; bottom: 15%; color: #fff; animation-delay: -3.4s; }
.auth-art-spark { position: absolute; color: #ffc2ed; text-shadow: 0 0 13px rgba(255,103,205,.8); }
.spark-one { top: 9%; left: 24%; font-size: 22px; }
.spark-two { right: 22%; bottom: 7%; font-size: 17px; }
.auth-art-copy { position: relative; z-index: 2; width: min(100%, 400px); text-align: center; }
.auth-art-crown { color: #ffb6e7; font-size: 28px; line-height: 1; text-shadow: 0 0 19px rgba(255,102,207,.35); }
.auth-art-brand-title { margin-top: 5px; color: #fff3fd; font-size: clamp(23px, 2.5vw, 31px); font-weight: 950; letter-spacing: .035em; text-shadow: 0 3px 22px rgba(245,42,165,.14); }
.auth-art-brand-title span { color: #ff8dd2; }
.auth-art-brand-sub { margin-top: 2px; color: #c9addd; font-size: 8px; font-weight: 850; letter-spacing: .31em; }
.auth-art-copy h2 { margin: 18px 0 8px; color: #fff2fc; font-size: clamp(19px, 2.4vw, 25px); font-weight: 900; letter-spacing: -.035em; }
.auth-art-copy h2 span { color: #f77bc9; }
.auth-art-copy p { max-width: 355px; margin: 0 auto; color: #aa9aba; font-size: 10px; line-height: 1.8; }
.auth-art-features { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; width: min(100%, 430px); margin-top: 23px; }
.auth-art-features > div { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 76px; padding: 10px 6px; border: 1px solid rgba(213,129,255,.14); border-radius: 12px; background: linear-gradient(145deg, rgba(36,18,51,.63), rgba(14,9,29,.68)); }
.auth-art-features > div > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; color: #ffb0e4; background: rgba(245,42,165,.12); border: 1px solid rgba(245,42,165,.17); font-size: 13px; }
.auth-art-features strong { color: #d5c3e5; font-size: 8px; font-weight: 800; line-height: 1.35; }
.auth-art-bottom { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 22px; color: #80718f; font-size: 7px; font-weight: 850; letter-spacing: .16em; }
.auth-art-bottom i { width: 3px; height: 3px; border-radius: 50%; background: #d764be; }
.auth-register-artwork { position: relative; display: grid; place-items: center; width: min(100%, 390px); height: clamp(240px, 37vh, 350px); margin-top: 33px; }
.auth-register-cube {
    position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 145px; height: 145px; border: 1px solid rgba(255,171,236,.58); border-radius: 27px;
    background: linear-gradient(145deg, rgba(235,53,179,.42), rgba(111,46,190,.45) 54%, rgba(17,10,37,.86));
    box-shadow: 0 21px 51px rgba(0,0,0,.38), 0 0 40px rgba(230,47,177,.26), inset 0 1px 0 rgba(255,255,255,.24);
    transform: rotate(-8deg); animation: authPhoneFloat 6s ease-in-out infinite;
}
.auth-cube-crown { color: #ffd1ed; font-size: 30px; line-height: 1; text-shadow: 0 0 15px rgba(255,144,222,.4); }
.auth-register-cube strong { margin-top: 9px; color: #fff2fd; font-size: 21px; letter-spacing: .09em; }
.auth-register-cube small { margin-top: 1px; color: #f4b2e5; font-size: 8px; font-weight: 900; letter-spacing: .27em; }
.auth-register-cube i { position: absolute; bottom: 10px; right: 14px; color: #ffaddf; font-style: normal; }
.auth-register-ring { position: absolute; width: 260px; height: 86px; border: 1px solid rgba(247,96,203,.36); border-radius: 50%; transform: rotate(-22deg); box-shadow: 0 0 17px rgba(244,49,181,.07); }
.auth-register-ring.ring-two { width: 300px; height: 110px; transform: rotate(28deg); border-color: rgba(160,108,255,.29); }
.auth-register-star { position: absolute; color: #ffc2eb; font-size: 24px; text-shadow: 0 0 15px rgba(255,104,206,.8); }
.auth-register-star.star-a { top: 15%; right: 17%; }
.auth-register-star.star-b { bottom: 14%; left: 15%; font-size: 17px; }
.auth-art-register .auth-art-features { margin-top: 18px; }
@keyframes authOrbitPulse { from { transform: scale(.96) rotate(-4deg); opacity: .65; } to { transform: scale(1.04) rotate(4deg); opacity: 1; } }
@keyframes authGlowBreathe { 0%,100% { opacity: .65; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes authPhoneFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes authSocialFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* Maintenance surface follows the same luxury palette */
.trx-maintenance-body {
    background: radial-gradient(ellipse at 15% 10%, rgba(245,42,165,.13), transparent 35%), radial-gradient(ellipse at 85% 85%, rgba(139,92,246,.12), transparent 35%), #070611;
}
.trx-maintenance-card { border-color: rgba(210,128,255,.22); background: linear-gradient(145deg, rgba(27,16,43,.96), rgba(9,8,22,.98)); box-shadow: 0 24px 72px rgba(0,0,0,.43), 0 0 35px rgba(212,43,170,.055); }

@media (max-width: 1100px) {
    .auth-form-panel { padding-left: clamp(22px, 4vw, 48px); padding-right: clamp(22px, 4vw, 48px); }
    .auth-art-panel { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 850px) {
    .auth-page-premium { grid-template-columns: minmax(0,1fr); overflow: visible; }
    .auth-form-panel { min-height: 100vh; min-height: 100svh; padding: 24px clamp(20px, 7vw, 56px) 20px; border-right: 0; border-bottom: 1px solid rgba(206,124,255,.15); }
    .auth-form-content { padding: 43px 0; }
    .auth-art-panel { min-height: auto; padding: 48px 24px 30px; }
    .auth-art-topline { top: 17px; left: 20px; }
    .auth-art-stage { height: 255px; margin-top: 12px; }
    .auth-phone-mockup { width: 132px; height: 226px; border-radius: 24px; }
    .auth-phone-screen { border-radius: 18px; padding-top: 30px; }
    .auth-phone-crown { font-size: 24px; }
    .auth-phone-brand { font-size: 10px; }
    .auth-phone-mini-row { margin-top: 15px; }
    .auth-phone-mini-bar { margin-top: 14px; }
    .auth-phone-mini-card { margin-top: 13px; }
    .auth-art-orbit-one { width: 250px; }
    .auth-art-orbit-two { width: 300px; }
    .auth-register-artwork { height: 230px; margin-top: 13px; }
    .auth-art-bottom { margin-top: 18px; }
}
@media (max-width: 480px) {
    .auth-form-panel { padding: 19px 19px 17px; }
    .auth-brand-logo { width: 43px; height: 43px; flex-basis: 43px; border-radius: 13px; }
    .auth-brand-logo img { width: 37px; height: 37px; }
    .auth-brand-copy strong { font-size: 12px; }
    .auth-brand-copy small { font-size: 7px; letter-spacing: .16em; }
    .auth-form-content { padding: 38px 0 35px; }
    .auth-heading { font-size: 32px; }
    .auth-description { margin-bottom: 21px; font-size: 11px; }
    .auth-form label { margin-top: 13px; }
    .auth-input-shell { min-height: 47px; }
    .auth-input-shell input { min-height: 45px; font-size: 11px; }
    .auth-submit { min-height: 47px; }
    .auth-form-footer { align-items: flex-start; flex-direction: column; gap: 8px; }
    .auth-art-panel { padding-left: 18px; padding-right: 18px; }
    .auth-art-features { gap: 6px; }
    .auth-art-features > div { min-height: 70px; padding: 8px 4px; }
    .auth-art-features strong { font-size: 7.5px; }
    .auth-art-copy p { font-size: 9px; }
    .auth-social-float { width: 35px; height: 35px; border-radius: 11px; font-size: 15px; }
    .auth-social-instagram { left: 1%; }
    .auth-social-facebook { right: 1%; }
}
@media (prefers-reduced-motion: reduce) {
    .auth-art-panel::after, .auth-art-orbit, .auth-phone-glow, .auth-phone-mockup, .auth-social-float, .auth-register-cube { animation: none !important; }
}


/* =========================================================
   TRX EDITION — PRISM LUXURY / PHONE-FIRST RGB EDITION
   Visual-only layer: preserve existing forms, URLs, handlers and data flow.
   Palette: champagne gold + electric cyan + aurora fuchsia + violet.
   ========================================================= */
:root {
    --trx-bg: #050711;
    --trx-bg-2: #090c1b;
    --trx-panel: #0b1222;
    --trx-panel-2: #111a2e;
    --trx-border: rgba(70, 217, 255, .19);
    --trx-border-strong: rgba(255, 188, 97, .48);
    --trx-text: #f7f7ff;
    --trx-muted: #9ca9c4;
    --trx-primary: #27dfff;
    --trx-primary-2: #875dff;
    --trx-success: #42f0bf;
    --trx-danger: #ff628e;
    --trx-warning: #ffca70;
    --trx-radius: 18px;
    --trx-shadow: 0 20px 60px rgba(0, 0, 0, .34);
    --trx-cyan: #29e4ff;
    --trx-fuchsia: #ff45bf;
    --trx-gold: #ffd078;
    --trx-violet: #8a65ff;
}

html { background: #050711; }
body:not(.trx-welcome-body):not(.trx-maintenance-body) {
    color: var(--trx-text);
    background:
        radial-gradient(ellipse at 4% 8%, rgba(255, 65, 191, .105), transparent 30%),
        radial-gradient(ellipse at 98% 4%, rgba(38, 221, 255, .105), transparent 29%),
        radial-gradient(ellipse at 50% 105%, rgba(255, 190, 94, .055), transparent 37%),
        linear-gradient(145deg, #040610 0%, #080c1c 48%, #050711 100%);
}
body.trx-app-route { background-attachment: fixed; }
::selection { background: rgba(255, 69, 191, .34); color: #fff; }

/* Aurora wash remains behind content and does not intercept taps. */
.trx-app { position: relative; isolation: isolate; }
.trx-app::before {
    content: "";
    position: fixed;
    inset: -15%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 8% 22%, rgba(255, 61, 189, .075), transparent 29%),
        radial-gradient(ellipse at 89% 20%, rgba(41, 228, 255, .07), transparent 27%),
        radial-gradient(ellipse at 53% 82%, rgba(255, 190, 91, .045), transparent 32%);
    background-size: 145% 145%;
    animation: trxPrismAurora 20s ease-in-out infinite alternate;
}
@keyframes trxPrismAurora {
    0% { background-position: 0% 10%; opacity: .68; }
    50% { background-position: 62% 46%; opacity: 1; }
    100% { background-position: 100% 90%; opacity: .74; }
}

/* Glass shell and champagne brand details */
.trx-sidebar {
    background: linear-gradient(180deg, rgba(7, 11, 24, .985), rgba(5, 7, 17, .99));
    border-right-color: rgba(45, 221, 255, .16);
    box-shadow: 18px 0 58px rgba(0, 0, 0, .35), inset -1px 0 0 rgba(255,255,255,.025);
}
.trx-sidebar-brand { border-bottom: 1px solid rgba(255, 196, 102, .11); }
.trx-logo-mark {
    background: linear-gradient(145deg, #ffca70 0%, #ff4bbd 42%, #7469ff 72%, #25dfff 100%);
    box-shadow: 0 8px 26px rgba(255, 72, 184, .18), 0 0 22px rgba(36, 220, 255, .10);
}
.trx-logo strong, .trx-topbar-brand { color: #fff9ee; text-shadow: 0 0 18px rgba(255, 192, 105, .09); }
.trx-logo small { color: #8b9bb8; }
.trx-user-card, .trx-support-mini {
    border-color: rgba(65, 212, 255, .17);
    background: linear-gradient(135deg, rgba(18, 31, 53, .86), rgba(17, 12, 33, .76) 62%, rgba(60, 20, 50, .33));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 26px rgba(0,0,0,.12);
}
.trx-avatar {
    color: #fff4dd;
    border: 1px solid rgba(255, 205, 113, .30);
    background: linear-gradient(145deg, rgba(255, 192, 92, .20), rgba(255, 63, 188, .17), rgba(44, 211, 255, .13));
}
.trx-nav-label { color: #6fa6b7; }
.trx-side-link { color: #a8b8d1; border-radius: 12px; }
.trx-side-link:hover {
    color: #fff;
    border-color: rgba(53, 221, 255, .20);
    background: linear-gradient(100deg, rgba(255, 64, 189, .10), rgba(41, 218, 255, .08));
}
.trx-side-link.active {
    color: #fff;
    border-color: rgba(255, 172, 104, .27);
    background: linear-gradient(105deg, rgba(255, 65, 188, .17), rgba(122, 90, 255, .13) 55%, rgba(34, 220, 255, .09));
    box-shadow: inset 3px 0 0 #ffb966, 0 7px 24px rgba(64, 36, 112, .16);
}
.trx-side-icon { color: #8ceaff; }
.trx-online-dot, .trx-topbar-status { background: #42f0bf; box-shadow: 0 0 12px rgba(66, 240, 191, .56); }
.trx-topbar {
    background: linear-gradient(100deg, rgba(7, 11, 24, .94), rgba(10, 13, 28, .91) 55%, rgba(23, 10, 30, .90));
    border-bottom-color: rgba(44, 220, 255, .17);
    box-shadow: 0 9px 35px rgba(0,0,0,.12);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}
.trx-menu-button, .trx-topbar-support, .trx-topbar-login, .trx-topbar-user {
    border-color: rgba(77, 203, 255, .19);
    background: linear-gradient(145deg, rgba(15, 24, 44, .92), rgba(10, 12, 27, .94));
}
.trx-topbar-support span { color: var(--trx-gold); }
.trx-topbar-support:hover, .trx-topbar-login:hover { border-color: rgba(255, 190, 101, .46); background: rgba(255, 67, 190, .10); }

/* Premium glass cards, forms and responsive content across existing routes. */
h1, h2, h3, h4 { color: #fffaf4; }
p { color: #c2cce0; }
.muted { color: #91a0bc !important; }
small { color: #94a4bd; }
.card, .container, .feature-card {
    border-color: rgba(66, 208, 255, .18);
    background: linear-gradient(145deg, rgba(14, 24, 44, .94), rgba(8, 11, 25, .97) 58%, rgba(19, 11, 31, .96));
    box-shadow: 0 18px 45px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.035);
}
.card::before, .container::before {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 206, 115, .45), rgba(255, 67, 191, .34), rgba(43, 222, 255, .42), transparent);
}
.card:hover, .feature-card:hover { border-color: rgba(255, 80, 193, .31); box-shadow: 0 19px 47px rgba(0,0,0,.28), 0 0 24px rgba(42,218,255,.045); }
.btn, button {
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(112deg, #ffbd68 0%, #ff50b9 37%, #9660ff 69%, #25dfff 100%);
    background-size: 220% 220%;
    color: #fff;
    text-shadow: 0 1px 2px rgba(17, 9, 31, .30);
    box-shadow: 0 9px 27px rgba(255, 66, 184, .15), 0 0 18px rgba(45, 219, 255, .06), inset 0 1px 0 rgba(255,255,255,.23);
    animation: trxButtonPrism 9s ease-in-out infinite;
}
.btn:hover, button:hover {
    border-color: rgba(255, 216, 144, .40);
    box-shadow: 0 12px 31px rgba(255, 66, 184, .22), 0 0 24px rgba(45, 219, 255, .11), inset 0 1px 0 rgba(255,255,255,.27);
}
.btn.secondary, button.secondary {
    color: #dceafa;
    background: linear-gradient(145deg, rgba(18, 28, 49, .96), rgba(11, 13, 30, .96));
    border-color: rgba(62, 212, 255, .20);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    animation: none;
}
.btn.danger, button.danger { background: linear-gradient(110deg, #ff628e, #bf3d92); animation: none; }
.btn.success, button.success { background: linear-gradient(110deg, #3be7b5, #09a8bd); animation: none; }
@keyframes trxButtonPrism { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
label { color: #dce7f8; }
input, select, textarea {
    color: #f9fbff;
    border-color: rgba(53, 208, 255, .20);
    background: linear-gradient(145deg, rgba(7, 13, 28, .94), rgba(10, 12, 28, .96));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}
input::placeholder, textarea::placeholder { color: #73839e; }
input:hover, select:hover, textarea:hover { border-color: rgba(255, 91, 195, .30); }
input:focus, select:focus, textarea:focus {
    border-color: rgba(39, 224, 255, .68);
    background: #09152a;
    box-shadow: 0 0 0 3px rgba(39,224,255,.09), 0 0 20px rgba(255,63,187,.055);
}
th { color: #8ba7c7; background: rgba(5, 9, 21, .72); }
td { color: #dbe5f6; }
table tr:hover td { background: linear-gradient(90deg, rgba(255,66,188,.055), rgba(34,220,255,.04)); }
pre { border-color: rgba(44, 220, 255, .19); background: #040915; }
code { color: #a2efff; background: rgba(39, 217, 255, .085); }

/* Dashboard panels glow with a restrained, multi-accent spectrum. */
.trx-hero-strip {
    border-color: rgba(255, 189, 100, .24);
    background: radial-gradient(ellipse at 87% 15%, rgba(255,65,188,.18), transparent 38%), radial-gradient(ellipse at 14% 105%, rgba(35,220,255,.10), transparent 35%), linear-gradient(120deg, rgba(19,24,46,.97), rgba(10,12,27,.97));
    box-shadow: 0 19px 45px rgba(0,0,0,.27), inset 0 1px 0 rgba(255,255,255,.06);
}
.trx-hero-strip::after { background: linear-gradient(180deg, rgba(255,203,111,.09), rgba(255,71,190,.08), rgba(39,220,255,.06)); }
.trx-hero-strip strong { color: #fff1d2; }
.trx-stat-card, .trx-panel-card {
    border-color: rgba(66, 208, 255, .18);
    background: linear-gradient(145deg, rgba(16,26,47,.93), rgba(7,11,25,.97));
    box-shadow: 0 15px 37px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.035);
}
.trx-stat-card:hover { border-color: rgba(255, 190, 103, .32); box-shadow: 0 18px 40px rgba(0,0,0,.28), 0 0 22px rgba(37,220,255,.055); }
.trx-stat-card::after { background: rgba(255, 63, 190, .075); }
.trx-stat-card.accent-success::after { background: rgba(54, 240, 185, .075); }
.trx-stat-card.accent-warning::after { background: rgba(255, 199, 97, .085); }
.trx-stat-icon { color: #ffdc91; border-color: rgba(255, 197, 99, .22); background: linear-gradient(145deg, rgba(255,190,93,.13), rgba(255,67,188,.085), rgba(43,219,255,.07)); }
.trx-stat-label { color: #a5b6ce; }
.trx-stat-value { color: #fff8ea; text-shadow: 0 0 18px rgba(255,190,99,.08); }
.trx-stat-note { color: #8296b6; }
.trx-status-pill { border-color: rgba(49,232,178,.18); }
.trx-route-loader-card { border-color: rgba(49, 219, 255, .23); background: rgba(6, 11, 24, .97); box-shadow: 0 22px 60px rgba(0,0,0,.45), 0 0 26px rgba(45,219,255,.07); }
.trx-loader-ring { border-top-color: #ffbf67; border-right-color: #ff4aba; border-bottom-color: #29def9; }
.trx-footer { color: #8293ae; }
.trx-footer-inner { border-top-color: rgba(52, 206, 255, .14); }
.trx-footer-inner strong { color: #f6dfb1; }
.trx-footer-links a { color: #91a7bf; }
.trx-footer-links a:hover { color: #fff; }

/* Authentication panels: same handlers, new prism lighting only. */
.auth-page-premium { background: linear-gradient(130deg, rgba(4,7,17,.98), rgba(6,10,23,.97) 47%, rgba(15,7,25,.96)); }
.auth-form-panel {
    background: radial-gradient(ellipse at 20% 0%, rgba(255,188,95,.07), transparent 33%), linear-gradient(160deg, rgba(8,13,28,.985), rgba(5,7,18,.99));
    border-right-color: rgba(41,218,255,.17);
}
.auth-form-panel::before { background: linear-gradient(180deg, #ffca70, #ff46bd 43%, #26e1ff); opacity: .7; }
.auth-brand-logo {
    border-color: rgba(255,201,109,.32);
    background: linear-gradient(140deg, rgba(255,193,89,.16), rgba(255,66,186,.13), rgba(39,221,255,.12));
    box-shadow: 0 12px 28px rgba(255,70,184,.10), 0 0 20px rgba(39,221,255,.06);
}
.auth-brand-copy strong { color: #ffdda0; text-shadow: 0 0 16px rgba(255,191,102,.10); }
.auth-brand-copy small { color: #8da6bf; }
.auth-kicker { color: #89dbe9; }
.auth-kicker-dot, .auth-art-live-dot { background: #43f0bd; box-shadow: 0 0 12px rgba(67,240,189,.70); }
.auth-heading span, .auth-art-brand-title span, .auth-art-copy h2 span { background: linear-gradient(95deg, #ffd27b, #ff53b9 48%, #32e0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-description { color: #98a9c4; }
.auth-form label { color: #d9e5f6; }
.auth-input-shell { border-color: rgba(52,209,255,.23); background: linear-gradient(145deg, rgba(8,14,30,.95), rgba(12,13,31,.96)); }
.auth-input-shell:focus-within { border-color: rgba(41,224,255,.67); box-shadow: 0 0 0 3px rgba(41,224,255,.085), 0 0 24px rgba(255,65,189,.06); }
.auth-input-icon { color: #ffb9cf; }
.auth-submit { background: linear-gradient(110deg, #ffbd66, #ff49b8 37%, #9860ff 69%, #29dfff) !important; background-size: 220% 220% !important; animation: trxButtonPrism 8s ease-in-out infinite !important; box-shadow: 0 12px 30px rgba(255,64,184,.18), 0 0 20px rgba(41,219,255,.09); }
.auth-switchline a { color: #47dffa; }
.auth-assurance { color: #8196b1; }
.auth-assurance > span { color: #ffd17a; }
.auth-form-footer { border-top-color: rgba(45,211,255,.13); }
.auth-form-footer > span:first-child { color: #6e829e; }
.auth-footer-links a { color: #a1aec4; }
.auth-art-panel {
    background: radial-gradient(ellipse at 50% 12%, rgba(255,63,188,.18), transparent 32%), radial-gradient(ellipse at 90% 82%, rgba(42,223,255,.12), transparent 30%), linear-gradient(150deg, #0a1021, #0a0719 59%, #080b18);
}
.auth-art-panel::before { border-color: rgba(255,197,109,.27); box-shadow: inset 0 0 65px rgba(255,64,186,.045), 0 0 45px rgba(42,220,255,.035); }
.auth-art-panel::after { background: linear-gradient(110deg, transparent 0%, rgba(255,195,104,.035) 22%, transparent 38%, rgba(41,221,255,.04) 55%, transparent 72%, rgba(255,68,190,.04) 92%, transparent 100%); }
.auth-art-orbit { border-color: rgba(41,220,255,.20); box-shadow: 0 0 25px rgba(41,220,255,.035); }
.auth-art-orbit-two { border-color: rgba(255,193,104,.17); }
.auth-phone-glow { background: radial-gradient(ellipse, rgba(255,59,189,.23), rgba(40,219,255,.10) 44%, transparent 71%); }
.auth-phone-mockup { border-color: rgba(255,202,113,.55); background: linear-gradient(145deg, #f9c16a, #ff4bb7 38%, #7468ff 72%, #27dcff); box-shadow: 0 25px 70px rgba(0,0,0,.47), 0 0 45px rgba(255,64,187,.16), 0 0 35px rgba(38,220,255,.10); }
.auth-phone-screen { background: radial-gradient(ellipse at 50% 14%, rgba(255,190,97,.15), transparent 40%), linear-gradient(160deg, #0e172b, #070b18); }
.auth-phone-crown, .auth-art-crown { color: #ffd47d; text-shadow: 0 0 19px rgba(255,196,103,.35); }
.auth-phone-brand { color: #fff0ce; }
.auth-phone-subtitle { color: #83e5f1; }
.auth-phone-mini-row span { border-color: rgba(44,220,255,.25); background: linear-gradient(145deg, rgba(255,66,186,.12), rgba(40,221,255,.08)); }
.auth-phone-mini-bar { background: linear-gradient(90deg, #ffc66c, #ff4ebc, #28e0ff); }
.auth-phone-mini-card { border-color: rgba(43,217,255,.18); background: linear-gradient(100deg, rgba(255,68,186,.08), rgba(38,220,255,.06)); }
.auth-phone-mini-card span:first-child { color: #ffd07a; }
.auth-social-float { border-color: rgba(90,224,255,.32); background: linear-gradient(145deg, rgba(22,35,59,.95), rgba(18,9,34,.95)); box-shadow: 0 12px 29px rgba(0,0,0,.28), 0 0 20px rgba(42,220,255,.07); }
.auth-social-instagram { color: #ff92d0; }
.auth-social-youtube { color: #ff7892; }
.auth-social-facebook { color: #94d9ff; }
.auth-social-telegram { color: #51e7ff; }
.auth-social-tiktok { color: #ffda8c; }
.auth-art-spark { color: #ffd57d; text-shadow: 0 0 13px rgba(255,193,102,.65); }
.auth-art-brand-title { color: #fff0cc; }
.auth-art-brand-sub { color: #8ea7c4; }
.auth-art-copy h2 { color: #f8f8ff; }
.auth-art-copy p { color: #98a7c1; }
.auth-art-features > div { border-color: rgba(46,213,255,.16); background: linear-gradient(145deg, rgba(19,32,54,.70), rgba(12,12,29,.72)); }
.auth-art-features > div > span { color: #ffce79; background: linear-gradient(135deg, rgba(255,194,98,.13), rgba(255,65,188,.10), rgba(39,220,255,.08)); border-color: rgba(255,189,93,.18); }
.auth-art-features strong { color: #c4d5e8; }
.auth-register-cube { border-color: rgba(255,203,114,.56); background: linear-gradient(145deg, rgba(255,184,80,.30), rgba(255,54,177,.35) 47%, rgba(34,204,255,.18) 78%, rgba(13,10,29,.9)); box-shadow: 0 21px 51px rgba(0,0,0,.38), 0 0 40px rgba(255,54,177,.20), inset 0 1px 0 rgba(255,255,255,.24); }
.auth-cube-crown { color: #ffd982; }
.auth-register-cube strong { color: #fff5e3; }
.auth-register-cube small { color: #8feeff; }
.auth-register-ring { border-color: rgba(41,220,255,.31); }
.auth-register-ring.ring-two { border-color: rgba(255,183,93,.28); }
.auth-register-star { color: #ffd780; }
.auth-maintenance-card { border-color: rgba(42,221,255,.20); }

/* Mobile app dock inspired by the phone mockups. Uses only existing working routes. */
.trx-mobile-dock { display: none; }
.trx-mobile-dock-link, .trx-mobile-dock-create { -webkit-tap-highlight-color: transparent; }
.trx-mobile-dock-link:focus-visible, .trx-mobile-dock-create:focus-visible { outline: 2px solid var(--trx-cyan); outline-offset: 3px; }
.trx-mobile-dock-create span { display: grid; place-items: center; }
.trx-mobile-dock-menu { cursor: pointer; }
@media (max-width: 760px) {
    body.trx-app-route { overflow-x: clip; }
    .trx-main { padding-bottom: 100px; }
    .wrap { width: calc(100% - 18px); padding: 14px 0 18px; }
    .trx-topbar { min-height: 61px; background: rgba(5, 8, 19, .92); }
    .trx-topbar-brand img { filter: drop-shadow(0 0 8px rgba(255,190,101,.20)); }
    .card, .container { border-radius: 17px; }
    .trx-stat-grid { gap: 8px; }
    .trx-stat-card { border-radius: 15px; }
    .trx-dashboard-grid { gap: 11px; }
    .trx-mobile-dock {
        position: fixed;
        z-index: 85;
        left: 10px;
        right: 10px;
        bottom: max(9px, env(safe-area-inset-bottom));
        min-height: 67px;
        padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: center;
        gap: 3px;
        border: 1px solid rgba(69, 215, 255, .24);
        border-radius: 22px;
        background: linear-gradient(120deg, rgba(6, 11, 25, .94), rgba(15, 10, 31, .95) 57%, rgba(8, 14, 28, .96));
        box-shadow: 0 14px 38px rgba(0,0,0,.42), 0 0 25px rgba(42,215,255,.075), 0 0 24px rgba(255,67,188,.055), inset 0 1px 0 rgba(255,255,255,.055);
        -webkit-backdrop-filter: blur(22px) saturate(1.4);
        backdrop-filter: blur(22px) saturate(1.4);
    }
    .trx-mobile-dock::before {
        content: "";
        position: absolute;
        left: 18%; right: 18%; top: -1px;
        height: 1px;
        background: linear-gradient(90deg, transparent, #ffbf69, #ff47ba, #2bdfff, transparent);
        opacity: .9;
    }
    .trx-mobile-dock-link {
        min-width: 0;
        min-height: 49px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 4px;
        border: 1px solid transparent;
        border-radius: 14px;
        color: #8497b4;
        background: transparent;
        text-decoration: none;
        line-height: 1;
    }
    .trx-mobile-dock-link > span {
        display: grid;
        place-items: center;
        width: 25px; height: 25px;
        font-size: 20px;
        color: #9ceeff;
        text-shadow: 0 0 13px rgba(42,220,255,.16);
    }
    .trx-mobile-dock-link small { max-width: 100%; overflow: hidden; color: inherit; font-size: 8px; font-weight: 800; letter-spacing: .01em; text-overflow: ellipsis; white-space: nowrap; }
    .trx-mobile-dock-link.active { color: #fff0d1; background: linear-gradient(145deg, rgba(255,191,100,.12), rgba(255,62,189,.10), rgba(40,220,255,.08)); border-color: rgba(255,188,98,.16); }
    .trx-mobile-dock-link.active > span { color: #ffd27a; text-shadow: 0 0 16px rgba(255,189,95,.33); }
    .trx-mobile-dock-create {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 2px;
        min-height: 56px;
        margin-top: -17px;
        border: 1px solid rgba(255,223,150,.54);
        border-radius: 20px;
        color: #fff;
        text-decoration: none;
        background: linear-gradient(140deg, #ffbe68, #ff4bb9 42%, #8d63ff 73%, #29dcff);
        box-shadow: 0 7px 23px rgba(255,64,185,.24), 0 0 20px rgba(40,220,255,.10), inset 0 1px 0 rgba(255,255,255,.32);
        animation: trxDockPulse 4.5s ease-in-out infinite;
    }
    .trx-mobile-dock-create > span { font-size: 27px; font-weight: 400; line-height: 1; }
    .trx-mobile-dock-create small { font-size: 7px; font-weight: 900; color: #fff; }
    @keyframes trxDockPulse { 0%,100% { box-shadow: 0 7px 23px rgba(255,64,185,.22), 0 0 20px rgba(40,220,255,.09), inset 0 1px 0 rgba(255,255,255,.3); } 50% { box-shadow: 0 8px 29px rgba(255,64,185,.30), 0 0 27px rgba(40,220,255,.16), inset 0 1px 0 rgba(255,255,255,.35); } }
    .trx-footer { padding-bottom: 18px; }
    .trx-footer-inner { width: calc(100% - 18px); }
    .trx-sidebar-overlay { z-index: 90; }
    .trx-sidebar { z-index: 100; }
}
@media (max-width: 430px) {
    .trx-mobile-dock { left: 7px; right: 7px; border-radius: 19px; padding-left: 5px; padding-right: 5px; }
    .trx-mobile-dock-link > span { font-size: 18px; }
    .trx-mobile-dock-link small { font-size: 7.5px; }
    .trx-mobile-dock-create { border-radius: 17px; }
    .trx-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trx-stat-value { font-size: clamp(18px, 6vw, 25px); }
}
@media (max-width: 360px) {
    .trx-mobile-dock { left: 5px; right: 5px; gap: 1px; }
    .trx-mobile-dock-link small { font-size: 7px; }
    .trx-mobile-dock-create small { font-size: 6.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .trx-app::before, .trx-mobile-dock-create, .btn, button { animation: none !important; }
}

/* =====================================================================
   TRX EDITION — AURORA SPECTRUM LUXE
   Mobile-first colour pass inspired by the latest reference concept.
   CSS-only visual overrides; existing routes, forms and handlers remain.
   ===================================================================== */
:root {
    --trx-bg: #040911;
    --trx-bg-2: #06131d;
    --trx-panel: #091927;
    --trx-panel-2: #0d2130;
    --trx-border: rgba(71, 218, 245, .17);
    --trx-border-strong: rgba(255, 186, 79, .42);
    --trx-text: #f0f8ff;
    --trx-muted: #8da7bb;
    --trx-primary: #20d7f2;
    --trx-primary-2: #6c62ff;
    --trx-success: #27e6a4;
    --trx-danger: #ff587b;
    --trx-warning: #ffb650;
    --trx-cyan: #28e5fa;
    --trx-fuchsia: #f64db9;
    --trx-gold: #ffd16a;
    --trx-violet: #8d6cff;
    --trx-emerald: #25e9a5;
    --trx-orange: #ff8e4d;
    --trx-radius: 18px;
    --trx-shadow: 0 18px 54px rgba(0, 0, 0, .38);
}

html { background: #03070e; }
body:not(.trx-welcome-body):not(.trx-maintenance-body) {
    color: var(--trx-text);
    background:
        radial-gradient(ellipse at 4% 9%, rgba(255, 145, 77, .105), transparent 28%),
        radial-gradient(ellipse at 96% 5%, rgba(35, 222, 250, .12), transparent 30%),
        radial-gradient(ellipse at 70% 93%, rgba(36, 230, 164, .075), transparent 32%),
        radial-gradient(ellipse at 38% 53%, rgba(111, 94, 255, .06), transparent 42%),
        linear-gradient(145deg, #03070e 0%, #071321 46%, #050914 100%);
}
::selection { background: rgba(40, 229, 250, .34); color: #fff; }

.trx-app::before {
    background:
        radial-gradient(ellipse at 7% 23%, rgba(255, 144, 75, .078), transparent 27%),
        radial-gradient(ellipse at 88% 18%, rgba(39, 223, 251, .095), transparent 28%),
        radial-gradient(ellipse at 55% 82%, rgba(38, 232, 163, .065), transparent 31%),
        radial-gradient(ellipse at 74% 62%, rgba(139, 104, 255, .065), transparent 29%);
    background-size: 150% 150%;
    animation: trxAuroraFloat 22s ease-in-out infinite alternate;
}
@keyframes trxAuroraFloat {
    0% { background-position: 0 10%; opacity: .68; }
    50% { background-position: 55% 55%; opacity: .96; }
    100% { background-position: 100% 90%; opacity: .78; }
}

/* Navigation: cool cyan glass with champagne and emerald highlights. */
.trx-sidebar {
    background: linear-gradient(180deg, rgba(5, 14, 25, .985), rgba(3, 8, 16, .992));
    border-right-color: rgba(41, 222, 248, .19);
    box-shadow: 18px 0 58px rgba(0, 0, 0, .39), inset -1px 0 0 rgba(255,255,255,.025);
}
.trx-sidebar-brand { border-bottom-color: rgba(255, 191, 87, .15); }
.trx-logo-mark {
    background: linear-gradient(145deg, #ffc15a 0%, #ff8d4d 24%, #f64fb4 48%, #7468ff 72%, #24e3f7 100%);
    box-shadow: 0 8px 25px rgba(255, 144, 76, .16), 0 0 22px rgba(39, 222, 249, .12);
}
.trx-logo strong, .trx-topbar-brand { color: #fff5d9; text-shadow: 0 0 17px rgba(255, 191, 87, .10); }
.trx-logo small { color: #789cb0; }
.trx-user-card, .trx-support-mini {
    border-color: rgba(41, 220, 248, .18);
    background: linear-gradient(130deg, rgba(12, 34, 49, .88), rgba(12, 19, 35, .86) 54%, rgba(28, 26, 50, .58));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 26px rgba(0,0,0,.16);
}
.trx-avatar { background: linear-gradient(145deg, #ffb954, #ff884e 35%, #865dff 70%, #21d9ef); color: #fff; }
.trx-nav-label { color: #69b8c8; }
.trx-side-link { color: #a4bdcd; border-radius: 12px; }
.trx-side-link:hover {
    color: #fff;
    border-color: rgba(39, 223, 250, .22);
    background: linear-gradient(100deg, rgba(35, 222, 249, .085), rgba(135, 102, 255, .075), rgba(255, 144, 76, .045));
}
.trx-side-link.active {
    color: #fff7e4;
    border-color: rgba(255, 190, 83, .24);
    background: linear-gradient(105deg, rgba(255, 178, 75, .17), rgba(246, 77, 185, .10) 46%, rgba(40, 221, 249, .12));
    box-shadow: inset 3px 0 0 #ffb84e, 0 7px 21px rgba(15, 195, 219, .055);
}
.trx-side-icon { color: #5fe7f2; }
.trx-side-link.active .trx-side-icon { color: #ffd16a; }
.trx-online-dot, .trx-topbar-status { background: #2debb0; box-shadow: 0 0 12px rgba(45, 235, 176, .58); }
.trx-topbar {
    background: rgba(4, 12, 22, .88);
    border-bottom-color: rgba(41, 221, 248, .16);
    -webkit-backdrop-filter: blur(19px) saturate(1.2);
    backdrop-filter: blur(19px) saturate(1.2);
}
.trx-menu-button, .trx-topbar-support, .trx-topbar-login, .trx-topbar-user {
    background: rgba(7, 23, 36, .86);
    border-color: rgba(57, 211, 235, .19);
}
.trx-topbar-support span { color: var(--trx-emerald); }
.trx-topbar-support:hover, .trx-topbar-login:hover { border-color: rgba(255, 188, 84, .42); background: rgba(255, 147, 77, .085); }

/* Shared elements used by the existing customer and admin pages. */
h1, h2, h3, h4 { color: #f5fbff; }
p { color: #c5d8e4; }
.muted { color: #90aabd !important; }
small { color: #82a0b3; }
a { text-decoration-thickness: .06em; text-underline-offset: 3px; }
.card, .container, .feature-card {
    border-color: rgba(52, 209, 233, .17);
    background: linear-gradient(145deg, rgba(10, 29, 43, .95), rgba(5, 12, 24, .97) 64%, rgba(14, 15, 33, .96));
    box-shadow: 0 17px 43px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035);
}
.card::before, .container::before {
    background: linear-gradient(90deg, transparent, rgba(255, 183, 76, .42), rgba(246, 77, 185, .24), rgba(39, 221, 249, .40), transparent);
}
.card:hover, .feature-card:hover {
    border-color: rgba(41, 222, 249, .33);
    box-shadow: 0 19px 47px rgba(0,0,0,.30), 0 0 25px rgba(39,221,249,.055), 0 0 22px rgba(255,143,76,.035);
}
.btn, button {
    color: #fff;
    border-color: rgba(255,255,255,.13);
    background: linear-gradient(108deg, #ffb64f 0%, #ff874f 22%, #f34db2 47%, #7b63ff 72%, #20dbee 100%);
    background-size: 240% 240%;
    box-shadow: 0 9px 26px rgba(241, 81, 168, .15), 0 0 20px rgba(39, 222, 249, .06), inset 0 1px 0 rgba(255,255,255,.22);
    animation: trxAuroraButton 10s ease-in-out infinite;
}
.btn:hover, button:hover {
    color: #fff;
    border-color: rgba(255, 198, 104, .42);
    box-shadow: 0 12px 31px rgba(241, 81, 168, .21), 0 0 24px rgba(39, 222, 249, .10), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn.secondary, button.secondary {
    color: #d8edf5;
    background: linear-gradient(145deg, rgba(12, 35, 49, .96), rgba(7, 15, 29, .97));
    border-color: rgba(40, 220, 248, .22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    animation: none;
}
.btn.danger, button.danger { background: linear-gradient(110deg, #ff6484, #cf377b); animation: none; }
.btn.success, button.success { background: linear-gradient(110deg, #20e4a0, #079eb2); animation: none; }
@keyframes trxAuroraButton { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
label { color: #dceaf3; }
input, select, textarea {
    color: #f6fbff;
    border-color: rgba(49, 203, 229, .22);
    background: linear-gradient(145deg, rgba(5, 17, 30, .96), rgba(7, 17, 31, .97));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
input::placeholder, textarea::placeholder { color: #6f8da1; }
input:hover, select:hover, textarea:hover { border-color: rgba(255, 163, 78, .32); }
input:focus, select:focus, textarea:focus {
    border-color: rgba(37, 226, 245, .72);
    background: #071a2a;
    box-shadow: 0 0 0 3px rgba(37,226,245,.09), 0 0 20px rgba(255,146,77,.055);
}
th { color: #b2d9e6; background: rgba(4, 15, 27, .88); }
td { color: #d9e8f0; }
th, td { border-bottom-color: rgba(49, 190, 221, .11); }
table tr:hover td { background: linear-gradient(90deg, rgba(35,220,248,.045), rgba(37,230,164,.035), rgba(255,145,76,.025)); }
pre { border-color: rgba(44, 214, 239, .20); background: #030a12; }
code { color: #9cf4ff; background: rgba(39, 217, 244, .085); }
.alert { background: rgba(7, 22, 35, .92); border-color: rgba(52, 203, 231, .17); }
.alert.success, .success { border-color: rgba(39, 230, 164, .24); background: rgba(39,230,164,.075); color: #c8ffed; }
.alert.danger, .danger { border-color: rgba(255, 88, 123, .26); background: rgba(255,88,123,.075); color: #ffd4df; }
.alert.warning, .note { border-color: rgba(255, 183, 78, .24); background: rgba(255,183,78,.07); color: #ffedcb; }
.badge-blue, .get { color: #8cefff; background: rgba(37, 216, 242, .12); }
.order-info { border-color: rgba(38, 217, 242, .23); background: rgba(33, 175, 200, .065); }
.order-info-box { border-color: rgba(54, 201, 226, .13); background: rgba(4, 14, 25, .65); }
.estimated-charge { border-color: rgba(35, 228, 163, .14); background: rgba(35,228,163,.07); color: #c8ffec; }

/* Main dashboard: warm, cool and green accent cards like the reference. */
.trx-eyebrow { color: #7fe6f3; }
.trx-page-title span {
    background: linear-gradient(95deg, #ffe3a0 0%, #ff9c57 27%, #f85fb7 52%, #8d80ff 75%, #42e5f1 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.trx-page-subtitle { color: #94adbf; }
.trx-hero-strip {
    border-color: rgba(255, 178, 72, .25);
    background: radial-gradient(ellipse at 88% 18%, rgba(255,140,75,.17), transparent 36%), radial-gradient(ellipse at 14% 105%, rgba(39,221,249,.12), transparent 36%), radial-gradient(ellipse at 60% 5%, rgba(37,230,164,.06), transparent 32%), linear-gradient(120deg, rgba(12,31,46,.97), rgba(5,12,24,.98));
    box-shadow: 0 19px 45px rgba(0,0,0,.29), inset 0 1px 0 rgba(255,255,255,.05);
}
.trx-hero-strip::after { background: linear-gradient(180deg, rgba(255,190,84,.12), rgba(247,77,184,.065), rgba(39,221,249,.07)); }
.trx-hero-strip strong { color: #fff0ce; }
.trx-live-pill { color: #7df4c4; background: rgba(37,230,164,.09); border-color: rgba(37,230,164,.15); }
.trx-stat-card, .trx-panel-card {
    border-color: rgba(48, 206, 231, .18);
    background: linear-gradient(148deg, rgba(10, 30, 45, .95), rgba(5, 13, 26, .97));
    box-shadow: 0 14px 36px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.035);
}
.trx-stat-card:hover { border-color: rgba(255, 182, 76, .35); box-shadow: 0 18px 40px rgba(0,0,0,.30), 0 0 22px rgba(39,221,249,.055); }
.trx-stat-card::after { background: rgba(255, 145, 76, .065); }
.trx-stat-card:nth-child(2)::after { background: rgba(39, 221, 249, .065); }
.trx-stat-card.accent-success::after { background: rgba(37,230,164,.075); }
.trx-stat-card.accent-warning::after { background: rgba(255,183,78,.085); }
.trx-stat-icon { color: #ffd783; border-color: rgba(255,183,78,.24); background: linear-gradient(145deg, rgba(255,183,78,.13), rgba(255,141,75,.07), rgba(39,221,249,.06)); }
.trx-stat-card:nth-child(2) .trx-stat-icon { color: #71eeff; border-color: rgba(39,221,249,.23); background: rgba(39,221,249,.09); }
.trx-stat-card.accent-success .trx-stat-icon { color: #7cf4c5; border-color: rgba(37,230,164,.23); background: rgba(37,230,164,.085); }
.trx-stat-card.accent-warning .trx-stat-icon { color: #ffe0a0; border-color: rgba(255,183,78,.23); background: rgba(255,183,78,.085); }
.trx-stat-label { color: #a4c0cf; }
.trx-stat-value { color: #f5fbff; text-shadow: 0 0 17px rgba(40,221,248,.055); }
.trx-stat-note { color: #7f9aaf; }
.trx-panel-head { border-bottom-color: rgba(45, 202, 230, .12); }
.trx-panel-head p { color: #8ca9ba; }
.trx-panel-link { color: #ffe0a0; background: rgba(255,177,73,.085); }
.trx-order-row { border-bottom-color: rgba(48,197,225,.085); }
.trx-order-row:hover { background: rgba(36,222,245,.035); }
.trx-order-icon { color: #79edfa; background: rgba(39,221,249,.085); border-color: rgba(39,221,249,.17); }
.trx-order-price { color: #fff0d0; }
.trx-status-pill { border-color: rgba(38,226,164,.20); }
.status-success { color: #7af5c2; background: rgba(37,230,164,.09); }
.status-processing { color: #80e9ff; background: rgba(39,221,249,.09); }
.status-pending { color: #ffda86; background: rgba(255,183,78,.09); }
.status-danger { color: #ff9bb0; background: rgba(255,88,123,.09); }
.trx-balance-box { border-color: rgba(39,221,249,.22); background: radial-gradient(ellipse at 90% 0%, rgba(255,149,77,.12), transparent 54%), linear-gradient(140deg, rgba(11,52,65,.53), rgba(7,15,30,.88)); }
.trx-quick-grid a { border-color: rgba(43,209,233,.15); background: rgba(8,29,43,.75); color: #c9e3ee; }
.trx-quick-grid a:hover { border-color: rgba(255,177,73,.28); background: rgba(255,145,76,.065); }
.trx-footer { color: #7993a7; }
.trx-footer-inner { border-top-color: rgba(45,202,230,.15); }
.trx-footer-inner strong { color: #ffe0a0; }
.trx-footer-links a { color: #91b3c5; }
.trx-footer-links a:hover { color: #fff; }
.trx-route-loader-card { border-color: rgba(40,221,249,.25); background: rgba(4,13,25,.97); box-shadow: 0 22px 60px rgba(0,0,0,.45), 0 0 26px rgba(40,221,249,.07); }
.trx-loader-ring { border-top-color: #ffbd50; border-right-color: #f64db9; border-bottom-color: #25e6a4; }

/* Login & registration: keep the same forms and validation, recolour the shell. */
.auth-page-premium { background: linear-gradient(130deg, rgba(3,8,16,.99), rgba(5,15,26,.98) 48%, rgba(11,8,24,.98)); }
.auth-form-panel {
    background: radial-gradient(ellipse at 18% 0%, rgba(255,183,78,.075), transparent 34%), radial-gradient(ellipse at 0% 98%, rgba(37,230,164,.045), transparent 34%), linear-gradient(160deg, rgba(5,16,27,.99), rgba(3,8,18,.995));
    border-right-color: rgba(39,221,249,.19);
}
.auth-form-panel::before { background: linear-gradient(180deg, #ffbc50, #ff8d4d 27%, #f64db9 54%, #7066ff 76%, #28e5f4); opacity: .74; }
.auth-brand-logo { border-color: rgba(255,191,82,.30); background: linear-gradient(140deg, rgba(255,184,76,.15), rgba(246,77,185,.10), rgba(40,221,249,.12)); box-shadow: 0 12px 28px rgba(255,145,76,.075), 0 0 22px rgba(39,221,249,.075); }
.auth-brand-copy strong { color: #ffe6ab; text-shadow: 0 0 16px rgba(255,191,82,.10); }
.auth-brand-copy small { color: #80a8bd; }
.auth-kicker { color: #73dce8; }
.auth-kicker-dot, .auth-art-live-dot { background: #29e9a7; box-shadow: 0 0 12px rgba(41,233,167,.72); }
.auth-heading span, .auth-art-brand-title span, .auth-art-copy h2 span { background: linear-gradient(95deg, #ffe09b, #ff9957 26%, #f85fb8 52%, #9181ff 75%, #44e5f2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-description { color: #94aebe; }
.auth-form label { color: #d8e9f2; }
.auth-input-shell { border-color: rgba(43,204,231,.23); background: linear-gradient(145deg, rgba(5,18,31,.96), rgba(8,17,31,.98)); }
.auth-input-shell:focus-within { border-color: rgba(40,222,249,.72); box-shadow: 0 0 0 3px rgba(40,222,249,.085), 0 0 23px rgba(255,145,76,.055); }
.auth-input-icon { color: #ffbc64; }
.auth-submit { background: linear-gradient(108deg, #ffb64f 0%, #ff874f 22%, #f34db2 47%, #7b63ff 72%, #20dbee 100%) !important; background-size: 240% 240% !important; animation: trxAuroraButton 9s ease-in-out infinite !important; box-shadow: 0 12px 30px rgba(241,81,168,.18), 0 0 20px rgba(39,221,249,.09); }
.auth-switchline a { color: #56e6f2; }
.auth-assurance { color: #82a0b3; }
.auth-assurance > span { color: #ffd16a; }
.auth-form-footer { border-top-color: rgba(39,221,249,.14); }
.auth-form-footer > span:first-child { color: #678397; }
.auth-footer-links a { color: #9db9c8; }
.auth-art-panel {
    background: radial-gradient(ellipse at 50% 12%, rgba(255,143,76,.17), transparent 33%), radial-gradient(ellipse at 90% 82%, rgba(39,221,249,.13), transparent 30%), radial-gradient(ellipse at 8% 75%, rgba(37,230,164,.08), transparent 31%), linear-gradient(150deg, #081b2a, #080b18 58%, #050812);
}
.auth-art-panel::before { border-color: rgba(255,191,82,.27); box-shadow: inset 0 0 65px rgba(39,221,249,.045), 0 0 45px rgba(255,143,76,.04); }
.auth-art-panel::after { background: linear-gradient(110deg, transparent 0%, rgba(255,185,78,.04) 22%, transparent 38%, rgba(39,221,249,.045) 55%, transparent 72%, rgba(37,230,164,.035) 91%, transparent 100%); }
.auth-art-orbit { border-color: rgba(39,221,249,.21); box-shadow: 0 0 25px rgba(39,221,249,.04); }
.auth-art-orbit-two { border-color: rgba(255,183,78,.21); }
.auth-phone-glow { background: radial-gradient(ellipse, rgba(255,143,76,.19), rgba(39,221,249,.12) 44%, transparent 71%); }
.auth-phone-mockup { border-color: rgba(255,199,104,.57); background: linear-gradient(145deg, #ffc45a, #ff8d4d 28%, #f64db9 50%, #7768ff 74%, #25dff1); box-shadow: 0 25px 70px rgba(0,0,0,.47), 0 0 42px rgba(255,143,76,.12), 0 0 33px rgba(39,221,249,.12); }
.auth-phone-screen { background: radial-gradient(ellipse at 50% 14%, rgba(255,190,88,.16), transparent 40%), linear-gradient(160deg, #0c2231, #050b17); }
.auth-phone-crown, .auth-art-crown { color: #ffd574; text-shadow: 0 0 19px rgba(255,196,103,.35); }
.auth-phone-brand { color: #fff0c8; }
.auth-phone-subtitle { color: #7be9f2; }
.auth-phone-mini-row span { border-color: rgba(39,221,249,.25); background: linear-gradient(145deg, rgba(255,143,76,.10), rgba(40,221,249,.09)); }
.auth-phone-mini-bar { background: linear-gradient(90deg, #ffbc50, #ff8d4d, #f64db9, #25dff1); }
.auth-phone-mini-card { border-color: rgba(39,221,249,.18); background: linear-gradient(100deg, rgba(255,143,76,.07), rgba(39,221,249,.065)); }
.auth-phone-mini-card span:first-child { color: #ffd575; }
.auth-social-float { border-color: rgba(39,221,249,.32); background: linear-gradient(145deg, rgba(11,35,50,.95), rgba(9,12,27,.95)); box-shadow: 0 12px 29px rgba(0,0,0,.28), 0 0 20px rgba(39,221,249,.07); }
.auth-social-instagram { color: #ff8fc6; }
.auth-social-youtube { color: #ff7892; }
.auth-social-facebook { color: #94d9ff; }
.auth-social-telegram { color: #51e7ff; }
.auth-social-tiktok { color: #ffda8c; }
.auth-art-spark { color: #ffd57d; text-shadow: 0 0 13px rgba(255,193,102,.65); }
.auth-art-brand-title { color: #fff0c7; }
.auth-art-brand-sub { color: #8eb0c4; }
.auth-art-copy h2 { color: #f4fbff; }
.auth-art-copy p { color: #97b0bf; }
.auth-art-features > div { border-color: rgba(39,221,249,.17); background: linear-gradient(145deg, rgba(13,38,53,.70), rgba(7,14,27,.75)); }
.auth-art-features > div > span { color: #ffd176; background: linear-gradient(135deg, rgba(255,190,78,.13), rgba(255,143,76,.08), rgba(39,221,249,.08)); border-color: rgba(255,189,93,.18); }
.auth-art-features strong { color: #c6dce6; }
.auth-register-cube { border-color: rgba(255,193,85,.56); background: linear-gradient(145deg, rgba(255,184,80,.30), rgba(255,133,76,.30) 28%, rgba(246,77,185,.27) 48%, rgba(34,204,255,.20) 78%, rgba(5,11,24,.9)); box-shadow: 0 21px 51px rgba(0,0,0,.38), 0 0 40px rgba(39,221,249,.12), inset 0 1px 0 rgba(255,255,255,.24); }
.auth-cube-crown { color: #ffd982; }
.auth-register-cube strong { color: #fff5e3; }
.auth-register-cube small { color: #8feeff; }
.auth-register-ring { border-color: rgba(39,221,249,.31); }
.auth-register-ring.ring-two { border-color: rgba(255,183,93,.28); }
.auth-register-star { color: #ffd780; }
.auth-maintenance-card { border-color: rgba(39,221,249,.22); }

/* Mobile dock: retain the same working links, improve contrast and touch targets. */
.trx-mobile-dock {
    border-color: rgba(39,221,249,.27);
    background: linear-gradient(120deg, rgba(3,12,22,.96), rgba(7,21,34,.96) 52%, rgba(9,10,25,.97));
    box-shadow: 0 14px 38px rgba(0,0,0,.45), 0 0 24px rgba(39,221,249,.075), 0 0 20px rgba(255,143,76,.045), inset 0 1px 0 rgba(255,255,255,.06);
}
.trx-mobile-dock::before { background: linear-gradient(90deg, transparent, #ffb94d, #ff8e4d, #f64db9, #28e2f3, #25e6a4, transparent); }
.trx-mobile-dock-link > span { color: #74edf7; text-shadow: 0 0 13px rgba(39,221,249,.18); }
.trx-mobile-dock-link.active { color: #fff0cb; background: linear-gradient(145deg, rgba(255,183,78,.13), rgba(246,77,185,.075), rgba(39,221,249,.09)); border-color: rgba(255,188,78,.17); }
.trx-mobile-dock-link.active > span { color: #ffd06a; text-shadow: 0 0 16px rgba(255,189,95,.34); }
.trx-mobile-dock-create {
    border-color: rgba(255,221,149,.55);
    background: linear-gradient(140deg, #ffbc50, #ff8a4d 26%, #f64db9 51%, #7865ff 75%, #25deef);
    box-shadow: 0 7px 23px rgba(255,143,76,.20), 0 0 20px rgba(39,221,249,.11), inset 0 1px 0 rgba(255,255,255,.32);
}
@keyframes trxDockPulseAurora {
    0%,100% { box-shadow: 0 7px 23px rgba(255,143,76,.18), 0 0 20px rgba(39,221,249,.09), inset 0 1px 0 rgba(255,255,255,.3); }
    50% { box-shadow: 0 8px 29px rgba(246,77,185,.26), 0 0 27px rgba(39,221,249,.16), inset 0 1px 0 rgba(255,255,255,.36); }
}
.trx-mobile-dock-create { animation: trxDockPulseAurora 4.6s ease-in-out infinite; }

/* The landing splash has inline styling; higher-specificity selectors restyle it without editing its redirect logic. */
html body.trx-welcome-body {
    background: radial-gradient(ellipse at 14% 18%, rgba(255,145,76,.22), transparent 38%), radial-gradient(ellipse at 86% 82%, rgba(39,221,249,.17), transparent 34%), radial-gradient(ellipse at 47% 72%, rgba(37,230,164,.10), transparent 34%), linear-gradient(135deg, #030811 0%, #071625 52%, #050711 100%);
}
html body.trx-welcome-body .trx-welcome-orb { border-color: rgba(39,221,249,.22); box-shadow: 0 0 100px rgba(39,221,249,.09), inset 0 0 85px rgba(39,221,249,.055); }
html body.trx-welcome-body .trx-welcome-orb.two { border-color: rgba(255,145,76,.20); box-shadow: 0 0 100px rgba(255,145,76,.085), inset 0 0 85px rgba(255,145,76,.055); }
html body.trx-welcome-body .trx-welcome-card { border-color: rgba(39,221,249,.27); background: linear-gradient(145deg, rgba(11,31,46,.94), rgba(4,12,24,.96)); box-shadow: 0 28px 90px rgba(0,0,0,.46), 0 0 38px rgba(39,221,249,.055), inset 0 1px 0 rgba(255,255,255,.065); }
html body.trx-welcome-body .trx-welcome-logo-wrap { border-color: rgba(255,191,82,.34); background: linear-gradient(145deg, rgba(255,184,76,.18), rgba(246,77,185,.10), rgba(39,221,249,.12)); box-shadow: 0 0 38px rgba(255,145,76,.12), inset 0 1px 0 rgba(255,255,255,.08); }
html body.trx-welcome-body .trx-welcome-badge { color: #7deaf2; background: rgba(39,221,249,.075); border-color: rgba(39,221,249,.23); }
html body.trx-welcome-body .trx-welcome-badge i { background: #29e9a7; box-shadow: 0 0 12px rgba(41,233,167,.8); }
html body.trx-welcome-body .trx-welcome-title span { background: linear-gradient(95deg, #ffe09b 0%, #ff9c57 30%, #f85fb8 55%, #45e5f1 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html body.trx-welcome-body .trx-welcome-copy { color: #a3bac8; }
html body.trx-welcome-body .trx-welcome-feature { border-color: rgba(39,221,249,.16); background: linear-gradient(135deg, rgba(39,221,249,.045), rgba(255,145,76,.025)); color: #d4e5ec; }
html body.trx-welcome-body .trx-welcome-feature-icon { color: #ffd16a; background: rgba(255,183,78,.09); border-color: rgba(255,183,78,.18); }
html body.trx-welcome-body .trx-welcome-progress { background: rgba(126,163,188,.14); }
html body.trx-welcome-body .trx-welcome-progress span { background: linear-gradient(90deg, #ffbd50, #ff8d4d, #f64db9, #7767ff, #28e2f3, #25e6a4); box-shadow: 0 0 14px rgba(39,221,249,.30); }
html body.trx-welcome-body .trx-welcome-countdown { color: #86a4b8; }
html body.trx-welcome-body .trx-welcome-countdown strong { color: #fff0ce; }
html body.trx-welcome-body .trx-welcome-enter { border-color: rgba(255,221,149,.42); background: linear-gradient(100deg, #ffbc50, #ff8d4d 27%, #f64db9 52%, #7468ff 76%, #25dff1); box-shadow: 0 9px 25px rgba(255,143,76,.18), 0 0 16px rgba(39,221,249,.07), inset 0 1px 0 rgba(255,255,255,.22); }

@media (max-width: 760px) {
    .wrap { padding-top: 15px; }
    .trx-topbar { background: rgba(3, 10, 19, .95); }
    .trx-mobile-dock { backdrop-filter: blur(22px) saturate(1.35); -webkit-backdrop-filter: blur(22px) saturate(1.35); }
    .trx-stat-grid { gap: 9px; }
    .trx-stat-card, .trx-panel-card, .card, .container { box-shadow: 0 12px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.025); }
}
@media (prefers-reduced-motion: reduce) {
    .trx-app::before, .btn, button, .trx-mobile-dock-create { animation: none !important; }
    html { scroll-behavior: auto; }
}

/* =====================================================================
   TRX EDITION — NEBULA CROWN LUXE v4
   Reference-inspired visual layer only. No markup, routes, or business logic.
   Palette: deep midnight + electric cyan + emerald + champagne + orchid.
   ===================================================================== */
:root {
    --trx-bg: #030711;
    --trx-bg-2: #07111f;
    --trx-panel: #081729;
    --trx-panel-2: #0d2032;
    --trx-border: rgba(56, 221, 245, .20);
    --trx-border-strong: rgba(255, 190, 91, .47);
    --trx-text: #f1f8ff;
    --trx-muted: #8da7bd;
    --trx-primary: #1edcf6;
    --trx-primary-2: #8b5dff;
    --trx-success: #35efb0;
    --trx-danger: #ff5c91;
    --trx-warning: #ffbf5a;
    --trx-cyan: #28e6ff;
    --trx-fuchsia: #ff4fbd;
    --trx-gold: #ffd17c;
    --trx-violet: #9675ff;
    --trx-emerald: #35efb0;
    --trx-orange: #ff9652;
    --trx-radius: 20px;
    --trx-shadow: 0 20px 56px rgba(0, 0, 0, .42);
}

html { background: #02050c; }
body:not(.trx-welcome-body):not(.trx-maintenance-body) {
    background:
        radial-gradient(ellipse at 3% 8%, rgba(255, 149, 82, .105), transparent 25%),
        radial-gradient(ellipse at 96% 6%, rgba(31, 222, 255, .13), transparent 30%),
        radial-gradient(ellipse at 80% 76%, rgba(53, 239, 176, .075), transparent 28%),
        radial-gradient(ellipse at 48% 46%, rgba(150, 93, 255, .075), transparent 43%),
        linear-gradient(148deg, #02050c 0%, #061221 47%, #080716 100%);
    background-attachment: fixed;
}

.trx-app::before {
    background:
        radial-gradient(ellipse at 10% 20%, rgba(255, 149, 82, .095), transparent 27%),
        radial-gradient(ellipse at 88% 16%, rgba(31, 222, 255, .105), transparent 28%),
        radial-gradient(ellipse at 52% 85%, rgba(53, 239, 176, .075), transparent 29%),
        radial-gradient(ellipse at 78% 62%, rgba(150, 93, 255, .085), transparent 32%);
    background-size: 160% 160%;
    animation: trxNebulaDrift 25s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes trxNebulaDrift {
    0% { background-position: 0% 14%; opacity: .58; }
    55% { background-position: 66% 51%; opacity: .95; }
    100% { background-position: 100% 88%; opacity: .68; }
}

/* App chrome */
.trx-sidebar {
    background: linear-gradient(180deg, rgba(4, 14, 26, .985), rgba(3, 7, 16, .995));
    border-right: 1px solid rgba(40, 221, 248, .22);
    box-shadow: 20px 0 58px rgba(0, 0, 0, .40), inset -1px 0 0 rgba(255,255,255,.025);
}
.trx-sidebar-brand { border-bottom-color: rgba(255, 194, 102, .18); }
.trx-logo-mark {
    background: linear-gradient(135deg, #ffd17c 0%, #ff9552 23%, #ff4fbd 48%, #8d61ff 72%, #27e4ff 100%);
    box-shadow: 0 9px 28px rgba(255, 149, 82, .17), 0 0 25px rgba(39, 228, 255, .13);
}
.trx-logo strong, .trx-topbar-brand {
    color: #fff0cc;
    text-shadow: 0 0 17px rgba(255, 193, 102, .13);
}
.trx-logo small { color: #7ea5b9; }
.trx-user-card, .trx-support-mini {
    border-color: rgba(40, 221, 248, .20);
    background: linear-gradient(135deg, rgba(10, 36, 52, .87), rgba(9, 16, 32, .9) 58%, rgba(31, 19, 49, .6));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 28px rgba(0,0,0,.20);
}
.trx-avatar {
    background: linear-gradient(140deg, #ffc86c, #ff8954 34%, #8d60ff 70%, #1fdcf6);
    color: #fff;
    box-shadow: 0 0 21px rgba(255, 149, 82, .12);
}
.trx-nav-label { color: #62c9d7; }
.trx-side-link { border-radius: 13px; color: #9eb7c9; }
.trx-side-link:hover {
    border-color: rgba(39, 223, 250, .22);
    background: linear-gradient(100deg, rgba(35, 222, 249, .09), rgba(135, 102, 255, .075), rgba(255, 144, 76, .05));
}
.trx-side-link.active {
    color: #fff7e7;
    border-color: rgba(255, 194, 102, .25);
    background: linear-gradient(105deg, rgba(255, 178, 75, .18), rgba(255, 79, 189, .11) 45%, rgba(40, 221, 249, .13));
    box-shadow: inset 3px 0 0 #ffc56a, 0 8px 25px rgba(15, 195, 219, .06);
}
.trx-side-icon { color: #65eafb; }
.trx-topbar {
    border-bottom-color: rgba(49, 218, 243, .18);
    background: linear-gradient(105deg, rgba(3, 9, 18, .96), rgba(6, 18, 31, .94) 52%, rgba(14, 8, 25, .96));
    box-shadow: 0 8px 30px rgba(0,0,0,.15);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
}
.trx-menu-button { border-color: rgba(44, 218, 244, .21); background: rgba(8, 22, 37, .94); }
.trx-menu-button span { background: linear-gradient(90deg, #ffd17c, #ff4fbd, #27e4ff); }
.trx-topbar-support, .trx-topbar-login, .trx-topbar-user {
    border-color: rgba(47, 211, 238, .18);
    background: linear-gradient(135deg, rgba(12, 36, 51, .88), rgba(10, 13, 28, .92));
}
.trx-topbar-support span { color: #35efb0; }
.trx-topbar-support:hover, .trx-topbar-login:hover { border-color: rgba(255, 194, 102, .42); }
.trx-topbar-status { background: #35efb0; box-shadow: 0 0 12px rgba(53,239,176,.65); }

/* Page headings and subtle premium shimmer */
.wrap { padding-top: 27px; }
.trx-page-head { margin-bottom: 20px; }
.trx-eyebrow { color: #72e8f4; letter-spacing: .15em; }
.trx-page-title { text-shadow: 0 0 26px rgba(40, 221, 249, .07); }
.trx-page-title span {
    background: linear-gradient(92deg, #fff1c9, #ff9a57 24%, #ff58c0 48%, #a28aff 72%, #48e9fa);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.trx-page-subtitle { color: #91aabe; }
.trx-hero-strip {
    border-color: rgba(41, 221, 248, .22);
    background: radial-gradient(ellipse at 100% 0%, rgba(255,149,82,.14), transparent 38%), linear-gradient(115deg, rgba(7,29,44,.95), rgba(11,13,30,.93) 60%, rgba(31,13,43,.8));
    box-shadow: 0 16px 42px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.055);
}
.trx-hero-strip strong { color: #fff0ca; }
.trx-live-pill { color: #66f4c1; border-color: rgba(53,239,176,.24); background: rgba(53,239,176,.08); }

/* Glass cards with restrained multicolour edge glow */
.card, .container, .feature-card, .trx-panel-card, .trx-stat-card {
    border-color: rgba(49, 211, 237, .18);
    background: linear-gradient(145deg, rgba(9, 29, 45, .94), rgba(5, 13, 27, .96) 56%, rgba(19, 13, 35, .90));
    box-shadow: 0 18px 46px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.045);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.card::before, .container::before, .trx-panel-card::before {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 199, 106, .64), rgba(255, 79, 189, .55), rgba(40, 229, 250, .66), transparent);
    opacity: .70;
}
.card:hover, .container:hover, .feature-card:hover, .trx-panel-card:hover {
    border-color: rgba(40, 221, 248, .32);
    box-shadow: 0 21px 52px rgba(0,0,0,.34), 0 0 27px rgba(40,221,248,.055), inset 0 1px 0 rgba(255,255,255,.055);
}
.trx-stat-card {
    --trx-card-accent: #29def6;
    border-color: color-mix(in srgb, var(--trx-card-accent) 31%, transparent);
    background: radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--trx-card-accent) 12%, transparent), transparent 55%), linear-gradient(145deg, rgba(10,30,45,.96), rgba(5,12,25,.98));
}
.trx-stat-card:nth-child(1) { --trx-card-accent: #ffc46a; }
.trx-stat-card:nth-child(2) { --trx-card-accent: #28e5ff; }
.trx-stat-card:nth-child(3) { --trx-card-accent: #35efb0; }
.trx-stat-card:nth-child(4) { --trx-card-accent: #ff55c1; }
.trx-stat-card::after { background: color-mix(in srgb, var(--trx-card-accent) 11%, transparent); }
.trx-stat-icon {
    color: var(--trx-card-accent);
    border-color: color-mix(in srgb, var(--trx-card-accent) 30%, transparent);
    background: color-mix(in srgb, var(--trx-card-accent) 10%, transparent);
    box-shadow: 0 0 21px color-mix(in srgb, var(--trx-card-accent) 9%, transparent);
}
.trx-stat-label { color: #a2bac9; }
.trx-stat-value { color: #f5fbff; text-shadow: 0 0 18px rgba(40,221,248,.07); }
.trx-stat-note { color: #7796aa; }
.trx-panel-head { border-bottom-color: rgba(40,221,248,.14); }
.trx-panel-head p { color: #91aaba; }
.trx-panel-link { color: #ffdb9b; background: rgba(255,190,90,.085); border: 1px solid rgba(255,190,90,.14); }
.trx-order-row { border-bottom-color: rgba(48,197,225,.10); }
.trx-order-row:hover { background: linear-gradient(90deg, rgba(38,220,248,.045), rgba(255,79,189,.025)); }
.trx-order-icon { color: #75effb; background: rgba(40,221,248,.09); border-color: rgba(40,221,248,.18); }
.trx-order-price { color: #ffdfa4; }
.trx-status-pill { border-color: rgba(38,226,164,.20); }
.status-success { color: #76f5c4; background: rgba(53,239,176,.09); }
.status-processing { color: #7deeff; background: rgba(40,221,248,.09); }
.status-pending { color: #ffdb8d; background: rgba(255,190,90,.09); }
.status-danger { color: #ff9db9; background: rgba(255,88,123,.09); }
.trx-balance-box {
    border-color: rgba(40,221,248,.25);
    background: radial-gradient(ellipse at 90% 0%, rgba(255,149,82,.14), transparent 56%), linear-gradient(140deg, rgba(8,49,63,.56), rgba(5,13,26,.91));
}
.trx-quick-grid a {
    border-color: rgba(40,221,248,.16);
    background: linear-gradient(145deg, rgba(8,29,45,.88), rgba(14,12,32,.92));
    color: #cce3ee;
}
.trx-quick-grid a:nth-child(3n+1) { --trx-quick-accent: #27e5ff; }
.trx-quick-grid a:nth-child(3n+2) { --trx-quick-accent: #ffc46a; }
.trx-quick-grid a:nth-child(3n) { --trx-quick-accent: #35efb0; }
.trx-quick-grid a:hover { border-color: rgba(255,194,102,.34); transform: translateY(-2px); }

/* Inputs and form controls */
label { color: #d7e7f2; }
input, select, textarea {
    border-color: rgba(48, 211, 238, .22);
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(4,19,33,.98), rgba(8,15,31,.97));
    color: #f2f8ff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
input::placeholder, textarea::placeholder { color: #6f8fa3; }
input:hover, select:hover, textarea:hover { border-color: rgba(255, 163, 78, .38); }
input:focus, select:focus, textarea:focus {
    border-color: rgba(40,221,248,.67);
    background: #071827;
    box-shadow: 0 0 0 3px rgba(40,221,248,.085), 0 0 21px rgba(255,79,189,.045);
}
input[type="checkbox"], input[type="radio"] { accent-color: #ff56bd; }

/* Animated gradient buttons; maintain original labels and submit behavior */
.btn, button, input[type="submit"] {
    border: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(112deg, #ffc46a 0%, #ff9254 22%, #ff4fbd 47%, #895fff 70%, #28e5ff 100%);
    background-size: 220% 220%;
    color: #fff;
    box-shadow: 0 9px 25px rgba(255,79,189,.16), 0 0 19px rgba(40,221,248,.085), inset 0 1px 0 rgba(255,255,255,.20);
    animation: trxLuxeButtonFlow 10s ease-in-out infinite;
}
@keyframes trxLuxeButtonFlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.btn:hover, button:hover, input[type="submit"]:hover {
    filter: brightness(1.08) saturate(1.08);
    box-shadow: 0 13px 31px rgba(255,79,189,.22), 0 0 25px rgba(40,221,248,.12), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn.secondary, button.secondary {
    color: #cce3ee;
    border-color: rgba(40,221,248,.20);
    background: linear-gradient(135deg, rgba(9,34,50,.98), rgba(12,15,33,.98));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    animation: none;
}
.btn.danger, button.danger { background: linear-gradient(110deg, #fb507e, #be378e); animation: none; }
.btn.success, button.success { background: linear-gradient(110deg, #35efb0, #079cb4); animation: none; }

/* Tables, service catalogue and order form cards */
table { border-color: rgba(40,221,248,.13); border-spacing: 0; }
th {
    color: #80c6d6;
    background: linear-gradient(90deg, rgba(8,36,50,.94), rgba(19,14,36,.94));
    border-bottom-color: rgba(40,221,248,.17);
}
td { color: #d8e8f2; border-bottom-color: rgba(40,221,248,.085); }
table tr:hover td { background: linear-gradient(90deg, rgba(40,221,248,.045), rgba(255,79,189,.027), rgba(53,239,176,.02)); }
.trx-services-table th, .trx-services-table td { border-bottom-color: rgba(40,221,248,.10); }
.trx-category-pill { border-color: rgba(40,221,248,.19); background: rgba(40,221,248,.075); color: #a6f4ff; }
.trx-order-step, .order-info, .order-info-box, .trx-service-summary, .estimated-charge {
    border-color: rgba(40,221,248,.18);
    background: linear-gradient(140deg, rgba(7,28,44,.88), rgba(12,13,31,.92));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.trx-order-step-number { color: #ffdc9b; background: rgba(255,190,90,.095); border-color: rgba(255,190,90,.19); }
.trx-order-step-title { color: #eef9ff; }
.trx-order-step-hint { color: #86a3b5; }
.order-info-label { color: #82a8bc; }
.order-info-value { color: #fff0d0; }
.trx-empty-state { border-color: rgba(40,221,248,.16); background: rgba(6,19,32,.55); }

/* Login and registration remain real forms; only visual style changes. */
.auth-page-premium {
    background:
        radial-gradient(ellipse at 4% 90%, rgba(255,149,82,.14), transparent 34%),
        radial-gradient(ellipse at 94% 7%, rgba(40,221,248,.16), transparent 35%),
        radial-gradient(ellipse at 72% 74%, rgba(53,239,176,.065), transparent 27%),
        linear-gradient(135deg, #020711 0%, #071321 48%, #0c071a 100%);
}
.auth-form-panel {
    background: radial-gradient(ellipse at 100% 0%, rgba(40,221,248,.065), transparent 38%), radial-gradient(ellipse at 0% 100%, rgba(255,79,189,.07), transparent 36%), linear-gradient(150deg, rgba(5,15,27,.98), rgba(4,7,18,.99));
    border-right-color: rgba(40,221,248,.19);
}
.auth-form-panel::before { border-color: rgba(40,221,248,.17); box-shadow: 0 0 90px rgba(40,221,248,.06), inset 0 0 60px rgba(255,79,189,.035); }
.auth-brand-logo { border-color: rgba(255,194,102,.34); background: linear-gradient(140deg, rgba(255,194,102,.16), rgba(255,79,189,.12), rgba(40,221,248,.13)); }
.auth-brand-copy strong { color: #fff0ca; text-shadow: 0 0 19px rgba(255,194,102,.12); }
.auth-brand-copy small { color: #83b4c6; }
.auth-kicker { color: #74e8f4; }
.auth-kicker-dot { background: #35efb0; box-shadow: 0 0 13px rgba(53,239,176,.70); }
.auth-heading span { background: linear-gradient(100deg, #ffe3a4, #ff9857 28%, #ff50bd 53%, #a58aff 76%, #53eafa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-description { color: #9ab2c2; }
.auth-form label { color: #dcebf4; }
.auth-input-shell { border-color: rgba(40,221,248,.24); background: linear-gradient(145deg, rgba(4,18,32,.96), rgba(8,14,29,.98)); }
.auth-input-shell:focus-within { border-color: rgba(40,221,248,.72); box-shadow: 0 0 0 3px rgba(40,221,248,.09), 0 0 24px rgba(255,79,189,.05); }
.auth-input-icon { color: #ffd17c; }
.auth-submit { background: linear-gradient(105deg, #ffc46a 0%, #ff9254 23%, #ff4fbd 48%, #9261ff 73%, #28e5ff 100%) !important; background-size: 220% 220% !important; animation: trxLuxeButtonFlow 9s ease-in-out infinite !important; box-shadow: 0 12px 30px rgba(255,79,189,.18), 0 0 24px rgba(40,221,248,.10); }
.auth-switchline a { color: #5be8f6; }
.auth-assurance { color: #84a3b4; }
.auth-assurance > span { color: #ffd17c; }
.auth-form-footer { border-top-color: rgba(40,221,248,.15); }
.auth-footer-links a { color: #9bbbc8; }
.auth-art-panel {
    background: radial-gradient(ellipse at 75% 13%, rgba(255,79,189,.15), transparent 34%), radial-gradient(ellipse at 17% 83%, rgba(40,221,248,.12), transparent 37%), radial-gradient(ellipse at 58% 65%, rgba(53,239,176,.06), transparent 28%), linear-gradient(155deg, #061525, #050916 62%, #10081c);
}
.auth-art-panel::before { border-color: rgba(255,194,102,.28); box-shadow: inset 0 0 68px rgba(40,221,248,.05), 0 0 49px rgba(255,149,82,.045); }
.auth-art-panel::after { background: linear-gradient(110deg, transparent, rgba(255,194,102,.045), transparent 32%, rgba(40,221,248,.06), transparent 70%, rgba(53,239,176,.035), transparent); }
.auth-art-orbit { border-color: rgba(40,221,248,.23); }
.auth-art-orbit-two { border-color: rgba(255,194,102,.22); }
.auth-phone-mockup { border-color: rgba(255,208,124,.60); background: linear-gradient(145deg, #ffd17c, #ff9254 26%, #ff4fbd 49%, #8d61ff 73%, #28e5ff); box-shadow: 0 25px 70px rgba(0,0,0,.48), 0 0 42px rgba(255,149,82,.13), 0 0 35px rgba(40,221,248,.12); }
.auth-phone-screen { background: radial-gradient(ellipse at 50% 14%, rgba(255,194,102,.14), transparent 40%), linear-gradient(160deg, #0c2535, #040a15); }
.auth-phone-crown, .auth-art-crown { color: #ffd17c; text-shadow: 0 0 20px rgba(255,194,102,.36); }
.auth-phone-brand { color: #fff0ca; }
.auth-phone-subtitle { color: #73eaf6; }
.auth-phone-mini-row span { border-color: rgba(40,221,248,.25); background: linear-gradient(145deg, rgba(255,149,82,.10), rgba(40,221,248,.09)); }
.auth-phone-mini-bar { background: linear-gradient(90deg, #ffc46a, #ff9254, #ff4fbd, #8d61ff, #28e5ff); }
.auth-phone-mini-card { border-color: rgba(40,221,248,.20); background: linear-gradient(100deg, rgba(255,149,82,.07), rgba(40,221,248,.07)); }
.auth-social-float { border-color: rgba(40,221,248,.34); background: linear-gradient(145deg, rgba(9,33,48,.95), rgba(7,11,25,.96)); box-shadow: 0 12px 29px rgba(0,0,0,.30), 0 0 22px rgba(40,221,248,.085); }
.auth-social-instagram { color: #ff9acb; }
.auth-social-youtube { color: #ff7897; }
.auth-social-facebook { color: #a0dcff; }
.auth-social-telegram { color: #55eafa; }
.auth-social-tiktok { color: #ffdc94; }
.auth-art-spark { color: #ffd17c; text-shadow: 0 0 14px rgba(255,194,102,.70); }
.auth-art-brand-title { color: #fff0cb; }
.auth-art-brand-sub { color: #8eb8c8; }
.auth-art-copy h2 { color: #f3fbff; }
.auth-art-copy h2 span { background: linear-gradient(100deg, #ffbd65, #ff55bd, #40e8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-art-copy p { color: #9db5c2; }
.auth-art-features > div { border-color: rgba(40,221,248,.18); background: linear-gradient(145deg, rgba(13,38,53,.70), rgba(7,14,27,.78)); }
.auth-art-features > div > span { color: #ffd17c; background: linear-gradient(135deg, rgba(255,194,102,.13), rgba(255,149,82,.08), rgba(40,221,248,.08)); border-color: rgba(255,194,102,.20); }
.auth-art-features strong { color: #cbe1eb; }
.auth-register-cube { border-color: rgba(255,194,102,.58); background: linear-gradient(145deg, rgba(255,194,102,.30), rgba(255,149,82,.30) 28%, rgba(255,79,189,.27) 48%, rgba(40,221,248,.20) 78%, rgba(5,11,24,.9)); box-shadow: 0 21px 51px rgba(0,0,0,.39), 0 0 41px rgba(40,221,248,.13), inset 0 1px 0 rgba(255,255,255,.24); }
.auth-cube-crown, .auth-register-star { color: #ffd17c; }
.auth-register-cube strong { color: #fff5e3; }
.auth-register-cube small { color: #8feeff; }
.auth-register-ring { border-color: rgba(40,221,248,.32); }
.auth-register-ring.ring-two { border-color: rgba(255,194,102,.30); }

/* Mobile-first polish, safe-area aware and touch friendly */
.trx-mobile-dock {
    border-color: rgba(40,221,248,.28);
    background: linear-gradient(110deg, rgba(3,11,22,.97), rgba(7,20,33,.97) 42%, rgba(16,8,29,.97));
    box-shadow: 0 16px 44px rgba(0,0,0,.47), 0 0 26px rgba(40,221,248,.075), 0 0 20px rgba(255,79,189,.06), inset 0 1px 0 rgba(255,255,255,.07);
}
.trx-mobile-dock::before { background: linear-gradient(90deg, transparent, #ffc46a, #ff4fbd, #8d61ff, #28e5ff, #35efb0, transparent); }
.trx-mobile-dock-link > span { color: #77eefd; text-shadow: 0 0 14px rgba(40,221,248,.24); }
.trx-mobile-dock-link.active { color: #fff0ca; border-color: rgba(255,194,102,.20); background: linear-gradient(145deg, rgba(255,194,102,.13), rgba(255,79,189,.08), rgba(40,221,248,.10)); }
.trx-mobile-dock-link.active > span { color: #ffd17c; text-shadow: 0 0 18px rgba(255,194,102,.42); }
.trx-mobile-dock-create {
    border-color: rgba(255,225,160,.62);
    background: linear-gradient(140deg, #ffd17c, #ff9254 27%, #ff4fbd 51%, #8d61ff 74%, #28e5ff);
    box-shadow: 0 8px 25px rgba(255,79,189,.23), 0 0 22px rgba(40,221,248,.12), inset 0 1px 0 rgba(255,255,255,.34);
}
@keyframes trxNebulaDockPulse {
    0%, 100% { box-shadow: 0 8px 25px rgba(255,79,189,.21), 0 0 22px rgba(40,221,248,.10), inset 0 1px 0 rgba(255,255,255,.32); }
    50% { box-shadow: 0 9px 29px rgba(255,79,189,.30), 0 0 29px rgba(40,221,248,.17), inset 0 1px 0 rgba(255,255,255,.38); }
}
.trx-mobile-dock-create { animation: trxNebulaDockPulse 4.8s ease-in-out infinite; }
.trx-route-loader-card { border-color: rgba(40,221,248,.30); background: rgba(4,13,25,.97); box-shadow: 0 22px 60px rgba(0,0,0,.48), 0 0 29px rgba(40,221,248,.075); }
.trx-loader-ring { border-top-color: #ffc46a; border-right-color: #ff4fbd; border-bottom-color: #28e5ff; }
.trx-footer { color: #7899ab; }
.trx-footer-inner { border-top-color: rgba(40,221,248,.16); }
.trx-footer-inner strong { color: #ffe4ae; }
.trx-footer-links a { color: #91b7c5; }

@media (max-width: 850px) {
    .auth-form-panel { padding-top: max(22px, env(safe-area-inset-top)); }
    .auth-form-content { padding-top: 30px; padding-bottom: 28px; }
    .auth-art-panel { padding: 38px 18px 28px; }
    .auth-art-stage { height: 220px; }
}
@media (max-width: 760px) {
    .wrap { width: calc(100% - 16px); padding-top: 13px; padding-bottom: 20px; }
    .trx-topbar { min-height: 58px; padding: 8px 11px; }
    .trx-topbar-support { width: 38px; min-width: 38px; overflow: hidden; justify-content: center; padding: 6px; font-size: 0; }
    .trx-topbar-support span { font-size: 14px; }
    .trx-topbar-user { max-width: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
    .trx-page-head { align-items: flex-start; flex-direction: column; gap: 11px; }
    .trx-page-title { font-size: clamp(25px, 7vw, 35px); }
    .trx-page-subtitle { font-size: 11px; }
    .card, .container, .trx-panel-card, .trx-stat-card { border-radius: 17px; }
    .card, .container { padding: 15px; }
    .trx-stat-grid { gap: 8px; }
    .trx-stat-card { padding: 13px; }
    .trx-stat-label { font-size: 9px; }
    .trx-stat-note { font-size: 9px; }
    .trx-dashboard-grid { gap: 10px; }
    .trx-panel-head h3 { font-size: 15px; }
    .trx-quick-grid { gap: 8px; }
    .trx-quick-grid a { min-height: 74px; }
    .trx-order-step { padding: 13px; }
    .trx-order-step-title { font-size: 12px; }
    .trx-order-step-hint { font-size: 10px; }
    .row { grid-template-columns: minmax(0, 1fr); gap: 7px; }
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    input, select, textarea { min-height: 43px; font-size: 16px; }
    .btn, button, input[type="submit"] { min-height: 43px; }
    .trx-services-table { min-width: 650px; }
    .trx-services-table { table-layout: auto; }
    .card:has(.trx-services-table) { overflow-x: auto; }
    .trx-mobile-dock { padding-bottom: calc(7px + env(safe-area-inset-bottom)); }
}
@media (max-width: 480px) {
    body.trx-auth-route .auth-page-premium { min-height: 100svh; }
    body.trx-auth-route .auth-form-panel { padding: 20px 17px calc(18px + env(safe-area-inset-bottom)); min-height: 100svh; }
    body.trx-auth-route .auth-brand-logo { width: 43px; height: 43px; flex-basis: 43px; border-radius: 13px; }
    body.trx-auth-route .auth-brand-logo img { width: 37px; height: 37px; }
    body.trx-auth-route .auth-brand-copy strong { font-size: 12px; }
    body.trx-auth-route .auth-brand-copy small { font-size: 7px; letter-spacing: .16em; }
    body.trx-auth-route .auth-form-content { padding: 28px 0 20px; }
    body.trx-auth-route .auth-heading { font-size: clamp(29px, 9vw, 36px); }
    body.trx-auth-route .auth-description { margin: 10px 0 19px; font-size: 11px; }
    body.trx-auth-route .auth-input-shell { min-height: 46px; border-radius: 12px; }
    body.trx-auth-route .auth-input-shell input { min-height: 44px; font-size: 16px; }
    body.trx-auth-route .auth-submit { min-height: 48px; margin-top: 18px; }
    body.trx-auth-route .auth-form-footer { flex-wrap: wrap; font-size: 7px; }
    body.trx-auth-route .auth-art-panel { min-height: auto; padding: 31px 16px 24px; }
    body.trx-auth-route .auth-art-topline { left: 16px; top: 13px; font-size: 7px; }
    body.trx-auth-route .auth-art-stage { height: 184px; margin-top: 16px; }
    body.trx-auth-route .auth-phone-mockup { width: 105px; height: 175px; border-radius: 20px; }
    body.trx-auth-route .auth-phone-screen { border-radius: 15px; padding-top: 22px; }
    body.trx-auth-route .auth-phone-crown { font-size: 19px; }
    body.trx-auth-route .auth-phone-brand { font-size: 8px; }
    body.trx-auth-route .auth-phone-subtitle { font-size: 6px; }
    body.trx-auth-route .auth-art-copy h2 { font-size: 20px; }
    body.trx-auth-route .auth-art-copy p { font-size: 10px; }
    body.trx-auth-route .auth-art-features { gap: 6px; }
    body.trx-auth-route .auth-art-features > div { min-height: 64px; padding: 8px 4px; }
    body.trx-auth-route .auth-art-features strong { font-size: 7px; }
    .trx-mobile-dock { left: 6px; right: 6px; min-height: 63px; border-radius: 18px; }
    .trx-mobile-dock-link > span { font-size: 18px; }
    .trx-mobile-dock-link small { font-size: 7.2px; }
    .trx-mobile-dock-create { min-height: 53px; border-radius: 17px; }
    .trx-stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .trx-stat-value { font-size: clamp(18px, 6vw, 25px); }
    .trx-services-search { flex-wrap: wrap; }
    .trx-services-search > * { min-width: 100%; }
}
@media (max-width: 360px) {
    .wrap { width: calc(100% - 12px); }
    .card, .container { padding: 12px; }
    .trx-stat-card { padding: 11px; }
    .trx-mobile-dock { gap: 1px; left: 4px; right: 4px; }
    .trx-mobile-dock-link small { font-size: 6.8px; }
    .trx-mobile-dock-create small { font-size: 6px; }
    body.trx-auth-route .auth-form-panel { padding-left: 14px; padding-right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .trx-app::before, .trx-mobile-dock-create, .btn, button, input[type="submit"] { animation: none !important; }
    * { scroll-behavior: auto !important; }
}

/* =========================================================
   TRX EDITION — Smooth Motion & Mobile Polish
   CSS-only enhancement: no form, route, API or business logic.
   ========================================================= */
:root {
    --trx-motion-fast: 160ms;
    --trx-motion-mid: 240ms;
    --trx-motion-slow: 360ms;
    --trx-motion-ease: cubic-bezier(.2, .75, .25, 1);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 76px;
    -webkit-tap-highlight-color: transparent;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overscroll-behavior-x: none;
}

/* Keep interactions smooth without transitioning every CSS property. */
a,
.btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.trx-side-link,
.trx-mobile-dock-link,
.trx-mobile-dock-create,
.trx-quick-grid a,
.trx-topbar-support,
.trx-topbar-login,
.trx-services-item,
.trx-order-step,
.trx-panel-card,
.trx-stat-card,
.card,
.container,
.feature-card {
    transition:
        color var(--trx-motion-fast) ease,
        background-color var(--trx-motion-mid) ease,
        border-color var(--trx-motion-mid) ease,
        box-shadow var(--trx-motion-mid) ease,
        transform var(--trx-motion-mid) var(--trx-motion-ease),
        filter var(--trx-motion-mid) ease;
}

/* Clear, consistent focus treatment for keyboard and assistive navigation. */
:where(a, button, .btn, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid rgba(40, 221, 249, .92);
    outline-offset: 3px;
}

input,
select,
textarea {
    transition:
        border-color var(--trx-motion-mid) ease,
        box-shadow var(--trx-motion-mid) ease,
        background-color var(--trx-motion-mid) ease;
}

input:focus,
select:focus,
textarea:focus {
    transform: none;
}

/* Desktop hover only: avoid sticky hover/lifting on touchscreens. */
@media (hover: hover) and (pointer: fine) {
    .card:hover,
    .container:hover,
    .feature-card:hover,
    .trx-panel-card:hover,
    .trx-stat-card:hover {
        transform: translate3d(0, -2px, 0);
    }

    .trx-side-link:hover,
    .trx-quick-grid a:hover,
    .trx-mobile-dock-link:hover {
        transform: translate3d(0, -1px, 0);
    }

    .btn:hover,
    button:hover,
    input[type="submit"]:hover,
    input[type="button"]:hover {
        transform: translate3d(0, -1px, 0);
    }
}

/* Tactile press feedback that does not alter click handlers or form behavior. */
.btn:active,
button:active,
input[type="submit"]:active,
input[type="button"]:active,
.trx-mobile-dock-create:active,
.trx-quick-grid a:active {
    transform: scale(.985);
    transition-duration: 80ms;
}

/* Keep mobile motion lightweight and avoid horizontal page jumps. */
@media (max-width: 760px) {
    html { scroll-padding-top: 64px; }
    .trx-app,
    .wrap,
    .trx-topbar,
    .trx-mobile-dock {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .card:hover,
    .container:hover,
    .feature-card:hover,
    .trx-panel-card:hover,
    .trx-stat-card:hover,
    .trx-side-link:hover,
    .trx-quick-grid a:hover,
    .trx-mobile-dock-link:hover {
        transform: none;
    }

    .btn,
    button,
    input[type="submit"],
    input[type="button"] {
        touch-action: manipulation;
    }
}

/* Native, supported cross-page transition where the browser offers it. */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: trxSmoothPageOut 140ms ease-in both;
}

::view-transition-new(root) {
    animation: trxSmoothPageIn 220ms cubic-bezier(.2, .75, .25, 1) both;
}

@keyframes trxSmoothPageOut {
    to { opacity: .84; }
}

@keyframes trxSmoothPageIn {
    from { opacity: .86; }
    to { opacity: 1; }
}

/* Respect the visitor's device-level motion preference. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        view-transition-name: none !important;
    }
}


/* =========================================================
   TRX EDITION — PERFORMANCE-FIRST MOBILE/TABLET TUNING
   Keep the current layout, colors and PHP behavior. Remove
   expensive always-running paint effects on lower-power devices.
   ========================================================= */
html {
    scroll-behavior: auto !important;
    -webkit-text-size-adjust: 100%;
}

body,
body.trx-app-route,
body.trx-auth-route,
body.trx-welcome-body {
    background-attachment: scroll !important;
}

/* Static gradients and shadows remain; idle infinite animations stop. */
*,
*::before,
*::after {
    animation: none !important;
}

/* Keep interactions responsive without long eased effects. */
a,
button,
.btn,
input,
select,
textarea,
.card,
.container,
.feature-card,
.trx-panel-card,
.trx-stat-card,
.trx-side-link,
.trx-mobile-dock-link,
.trx-quick-grid a {
    transition-duration: 120ms !important;
}

/* Blur filters can be costly on Android GPUs; use the existing dark
   translucent surfaces instead, preserving the color scheme. */
@media (max-width: 900px), (pointer: coarse) {
    .trx-sidebar,
    .trx-topbar,
    .trx-mobile-dock,
    .card,
    .container,
    .feature-card,
    .trx-panel-card,
    .trx-stat-card,
    .auth-form-panel,
    .auth-art-panel,
    .auth-phone-mockup,
    .trx-welcome-card,
    .trx-welcome-orb,
    .trx-route-loader-card,
    .trx-user-card,
    .trx-quick-grid a {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .trx-sidebar,
    .trx-topbar,
    .trx-mobile-dock {
        box-shadow: 0 5px 18px rgba(0, 0, 0, .26) !important;
    }

    .card,
    .container,
    .feature-card,
    .trx-panel-card,
    .trx-stat-card,
    .auth-form-panel,
    .auth-art-panel,
    .trx-welcome-card {
        box-shadow: 0 5px 16px rgba(0, 0, 0, .24),
                    inset 0 1px 0 rgba(255, 255, 255, .025) !important;
    }

    .btn,
    button,
    input[type="submit"],
    input[type="button"] {
        transform: none;
        touch-action: manipulation;
    }

    .btn:active,
    button:active,
    input[type="submit"]:active,
    input[type="button"]:active,
    .trx-mobile-dock-create:active {
        transform: scale(.99);
    }
}

/* Respect user accessibility settings and avoid browser cross-page animation. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after {
        animation: none !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}