/* TRX EDITION VIP PANEL — unified luxury UI layer.
 * Visual-only overrides: no form names/actions, routes, IDs used by page scripts,
 * request methods, or server-side logic are changed here.
 */
:root {
  --trx-ink: #070912;
  --trx-surface: rgba(13, 17, 31, .92);
  --trx-surface-soft: rgba(16, 21, 39, .76);
  --trx-line: rgba(134, 157, 229, .19);
  --trx-line-hot: rgba(72, 218, 255, .34);
  --trx-text: #f4f7ff;
  --trx-muted: #9aa8c4;
  --trx-cyan: #42e6f5;
  --trx-violet: #9a75ff;
  --trx-pink: #fa66d6;
  --trx-gold: #f2cf7a;
  --trx-ease: cubic-bezier(.2, .7, .25, 1);
}

html { scroll-behavior: smooth; }
body.is-authenticated { isolation: isolate; }
body.is-authenticated main,
body.is-authenticated footer { position: relative; z-index: 1; }
body.is-authenticated main > .container { padding-bottom: clamp(56px, 7vw, 100px) !important; }

/* Shared surfaces across keys, account settings, server controls and admin pages. */
body.is-authenticated .card,
body.is-authenticated .modal-content {
  color: var(--trx-text) !important;
  background:
    radial-gradient(460px 180px at 100% 0%, rgba(125, 82, 255, .075), transparent 70%),
    linear-gradient(148deg, rgba(15, 20, 37, .96), rgba(7, 10, 19, .97)) !important;
  border: 1px solid var(--trx-line) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 54px rgba(0, 0, 0, .27), inset 0 1px 0 rgba(255,255,255,.035) !important;
  animation: trxSurfaceIn .45s var(--trx-ease) both;
}
body.is-authenticated .card-header {
  color: #f3f7ff !important;
  border-color: rgba(134,157,229,.14) !important;
  border-radius: 19px 19px 0 0 !important;
  background: linear-gradient(105deg, rgba(45, 226, 245, .075), rgba(139, 93, 255, .105) 56%, rgba(250, 102, 214, .055)) !important;
  font-weight: 850;
  letter-spacing: .015em;
}
body.is-authenticated .card-body { color: #dce5fa; }
body.is-authenticated .card-body > p,
body.is-authenticated .card-body .text-muted,
body.is-authenticated .form-text { color: var(--trx-muted) !important; }
body.is-authenticated h1,
body.is-authenticated h2,
body.is-authenticated h3,
body.is-authenticated h4,
body.is-authenticated h5,
body.is-authenticated h6 { color: #f3f6ff; letter-spacing: -.015em; }
body.is-authenticated label,
body.is-authenticated .form-label { color: #c7d3ed; font-weight: 730; }
body.is-authenticated hr { border-color: rgba(129, 151, 211, .16) !important; opacity: 1; }

/* Buttons: same existing classes and click targets, updated appearance only. */
body.is-authenticated .btn,
body.is-authenticated button:not(.dropdown-item):not(.as-mobile-menu),
body.is-authenticated .btnUpdate,
body.is-authenticated .btn-submit,
body.is-authenticated .copy-btn {
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: .005em;
  transition: transform .18s var(--trx-ease), box-shadow .18s var(--trx-ease), filter .18s var(--trx-ease), border-color .18s var(--trx-ease);
}
body.is-authenticated .btn-primary,
body.is-authenticated .btn-success,
body.is-authenticated .btn-info,
body.is-authenticated .btn-custom,
body.is-authenticated .btn-animated,
body.is-authenticated .btnUpdate,
body.is-authenticated .btn-submit,
body.is-authenticated button[type="submit"] {
  background-image: linear-gradient(105deg, #19bce3, #586cff 43%, #9258ee 73%, #d84fcd) !important;
  background-size: 190% 100% !important;
  border: 1px solid rgba(190, 214, 255, .18) !important;
  color: #fff !important;
  box-shadow: 0 10px 27px rgba(81, 99, 255, .18), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
body.is-authenticated .btn-danger,
body.is-authenticated button.btn-danger {
  background: linear-gradient(110deg, #b92c61, #ef527e) !important;
  color: #fff !important;
  border-color: rgba(255, 121, 157, .3) !important;
}
body.is-authenticated .btn-outline-light,
body.is-authenticated .btn-outline-secondary,
body.is-authenticated .btn-secondary,
body.is-authenticated .btn-dark,
body.is-authenticated .btn-light {
  background: rgba(255,255,255,.045) !important;
  color: #e6edff !important;
  border-color: rgba(140, 160, 219, .22) !important;
}
body.is-authenticated .btn:hover:not(:disabled),
body.is-authenticated button:not(:disabled):not(.dropdown-item):not(.as-mobile-menu):hover,
body.is-authenticated .btnUpdate:hover:not(:disabled),
body.is-authenticated .btn-submit:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 15px 33px rgba(71, 104, 255, .22), 0 0 22px rgba(66, 230, 245, .07) !important;
}
body.is-authenticated .btn:active:not(:disabled),
body.is-authenticated button:active:not(:disabled) { transform: translateY(0) scale(.99); }
body.is-authenticated .btn:disabled,
body.is-authenticated button:disabled { opacity: .52; cursor: not-allowed; }
body.is-authenticated .copy-btn { border: 1px solid var(--trx-line-hot) !important; }

/* Inputs retain their existing field names and validation flow. */
body.is-authenticated .form-control,
body.is-authenticated .form-select,
body.is-authenticated input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.is-authenticated textarea,
body.is-authenticated select {
  color: #eff5ff;
  border-radius: 12px;
  background-color: rgba(4, 8, 18, .83) !important;
  border: 1px solid rgba(128, 153, 220, .22) !important;
  min-height: 43px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
body.is-authenticated textarea.form-control,
body.is-authenticated textarea { min-height: 88px; }
body.is-authenticated input[type="file"] { padding: .45rem .55rem; }
body.is-authenticated input::placeholder,
body.is-authenticated textarea::placeholder { color: #6f7e9d !important; opacity: 1; }
body.is-authenticated .form-control:focus,
body.is-authenticated .form-select:focus,
body.is-authenticated input:focus,
body.is-authenticated textarea:focus,
body.is-authenticated select:focus {
  color: #fff !important;
  border-color: rgba(66, 230, 245, .56) !important;
  background-color: rgba(5, 10, 22, .97) !important;
  box-shadow: 0 0 0 .2rem rgba(66, 230, 245, .075), 0 0 23px rgba(92, 94, 255, .09) !important;
  outline: none;
}
body.is-authenticated option { color: #edf4ff; background: #101528; }
body.is-authenticated input[type="checkbox"],
body.is-authenticated input[type="radio"],
body.is-authenticated .form-check-input { accent-color: #45d9f2; }
body.is-authenticated .form-check-label { color: #c6d0e8; }

/* Tables / DataTables / action menus. */
body.is-authenticated .table-responsive { border-radius: 13px; scrollbar-color: #48517f #0c1020; scrollbar-width: thin; }
body.is-authenticated .table { --bs-table-color: #c8d4ef; --bs-table-bg: transparent; --bs-table-border-color: rgba(132, 152, 211, .13); margin-bottom: 0; }
body.is-authenticated .table thead th,
body.is-authenticated table.dataTable thead th {
  color: #aab9db !important;
  background: linear-gradient(180deg, rgba(49, 61, 107, .42), rgba(17, 23, 42, .92)) !important;
  border-color: rgba(132, 152, 211, .16) !important;
  text-transform: uppercase;
  font-size: .7rem;
  letter-spacing: .075em;
  font-weight: 850;
  vertical-align: middle;
  white-space: nowrap;
}
body.is-authenticated .table tbody td,
body.is-authenticated table.dataTable tbody td {
  color: #c9d4ec !important;
  background: rgba(7, 11, 22, .48) !important;
  border-color: rgba(132, 152, 211, .105) !important;
  vertical-align: middle;
}
body.is-authenticated .table-hover tbody tr:hover td,
body.is-authenticated .table tbody tr:hover td { background: rgba(77, 105, 209, .105) !important; }
body.is-authenticated .dataTables_wrapper,
body.is-authenticated .dataTables_info,
body.is-authenticated .dataTables_length,
body.is-authenticated .dataTables_filter,
body.is-authenticated .dataTables_paginate { color: #98a8c8 !important; }
body.is-authenticated .dataTables_wrapper .dataTables_filter input,
body.is-authenticated .dataTables_wrapper .dataTables_length select,
body.is-authenticated .dataTables_wrapper select,
body.is-authenticated .dataTables_wrapper input { color: #f2f6ff !important; }
body.is-authenticated .dropdown-menu {
  background: rgba(10, 14, 27, .98) !important;
  border: 1px solid rgba(135, 155, 225, .2) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.4), 0 0 25px rgba(127,87,255,.08) !important;
}
body.is-authenticated .dropdown-item { color: #cbd7f0; border-radius: 8px; }
body.is-authenticated .dropdown-item:hover,
body.is-authenticated .dropdown-item:focus { color: #fff !important; background: linear-gradient(100deg, rgba(66,230,245,.11), rgba(154,117,255,.13)) !important; }
body.is-authenticated .dropdown-divider { border-color: rgba(132,152,211,.16); }

/* Status messages, page-wide polish, keyboard accessibility. */
body.is-authenticated .alert {
  color: #e9f2ff;
  background: linear-gradient(125deg, rgba(23, 32, 58, .94), rgba(12, 17, 32, .96));
  border: 1px solid rgba(117, 157, 255, .22);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
}
body.is-authenticated .alert-success { border-color: rgba(56, 218, 164, .28); }
body.is-authenticated .alert-danger { border-color: rgba(255, 105, 139, .28); }
body.is-authenticated .alert-warning { border-color: rgba(242, 207, 122, .28); }
body.is-authenticated a:not(.btn):not(.dropdown-item):not(.as-side-link):not(.as-shortcut-card):not(.as-stat-card) { transition: color .16s ease; }
body.is-authenticated a:focus-visible,
body.is-authenticated button:focus-visible,
body.is-authenticated input:focus-visible,
body.is-authenticated select:focus-visible,
body.is-authenticated textarea:focus-visible { outline: 2px solid rgba(66,230,245,.75); outline-offset: 3px; }
body.is-authenticated .pagination .page-link { color: #cbd7f4; background: #10162a; border-color: rgba(132,152,211,.16); }
body.is-authenticated .pagination .active .page-link { color: #fff; background: linear-gradient(100deg,#3469d9,#8555e8); }
body.is-authenticated footer { padding: 20px 12px !important; color: #707d9a; border-top: 1px solid rgba(132,152,211,.09); background: linear-gradient(180deg, transparent, rgba(3,5,12,.25)); }
body.is-authenticated footer small { font-size: .68rem; letter-spacing: .045em; }

/* Keep the existing mobile menu functional on all phone sizes. An earlier
   stylesheet hid the sidebar at <=768px, preventing its toggle from opening. */
@media (max-width: 991.98px) {
  body.is-authenticated main { margin-left: 0 !important; }
  body.is-authenticated main > .container { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; }
}
@media (max-width: 767.98px) {
  body.is-authenticated.as-sidebar-open { overflow: hidden !important; }
  body.is-authenticated.as-sidebar-open main::after {
    content: ""; position: fixed; inset: 68px 0 0; z-index: 1000;
    background: rgba(1, 3, 10, .58); backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px); pointer-events: auto;
  }
  body.is-authenticated .as-sidebar {
    display: block !important;
    position: fixed !important;
    top: 68px !important;
    bottom: 0 !important;
    left: 0 !important;
    width: min(86vw, 292px) !important;
    transform: translateX(-110%) !important;
    z-index: 1060 !important;
    transition: transform .25s var(--trx-ease) !important;
  }
  body.is-authenticated .as-sidebar.is-open { transform: translateX(0) !important; }
  body.is-authenticated main { padding-top: 0 !important; }
  body.is-authenticated main > .container { padding: 15px 12px 72px !important; }
  body.is-authenticated .as-topbar { height: 68px !important; min-height: 68px !important; }
  body.is-authenticated .as-topbar-inner { padding: 0 11px !important; gap: 8px !important; }
  body.is-authenticated .as-brand { min-width: 0 !important; gap: 8px !important; }
  body.is-authenticated .as-brand-title { font-size: .82rem !important; }
  body.is-authenticated .as-brand-subtitle { font-size: .47rem !important; letter-spacing: .12em !important; }
  body.is-authenticated .as-brand-logo { width: 39px !important; height: 39px !important; flex-basis: 39px !important; }
  body.is-authenticated .as-mobile-menu { display: inline-flex !important; }
  body.is-authenticated .as-topbar-actions { gap: 6px !important; }
  body.is-authenticated .as-account-menu { max-width: calc(100vw - 20px); }
  body.is-authenticated .card { border-radius: 16px !important; }
  body.is-authenticated .card-header { border-radius: 15px 15px 0 0 !important; }
  body.is-authenticated .table { font-size: .85rem; }
  body.is-authenticated .table thead th,
  body.is-authenticated table.dataTable thead th { font-size: .62rem; }
}
@media (max-width: 420px) {
  body.is-authenticated .as-brand-subtitle { display: none !important; }
  body.is-authenticated .as-brand-title { font-size: .76rem !important; }
  body.is-authenticated .btn, body.is-authenticated button { max-width: 100%; }
}

/* Standalone utility pages (password confirmation and legacy LIB detail view). */
body.trx-utility-page {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 42px);
  color: var(--trx-text);
  background:
    radial-gradient(800px 460px at 8% 8%, rgba(66,230,245,.10), transparent 64%),
    radial-gradient(700px 480px at 96% 88%, rgba(250,102,214,.09), transparent 62%),
    linear-gradient(145deg, #050711, #090d1b 58%, #060710) !important;
  color: var(--trx-text) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.trx-utility-shell { width: min(100%, 1060px); animation: trxSurfaceIn .55s var(--trx-ease) both; }
.trx-utility-brand { display:flex; align-items:center; justify-content:center; gap:12px; margin:0 0 22px; color:#f7faff; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.trx-utility-brand img { width:48px; height:48px; object-fit:contain; filter:drop-shadow(0 0 17px rgba(66,230,245,.23)); }
.trx-utility-card { position:relative; overflow:hidden; padding:clamp(22px,4vw,42px); border:1px solid rgba(132,157,232,.24); border-radius:24px; background:linear-gradient(150deg,rgba(15,20,38,.96),rgba(6,9,18,.97)); box-shadow:0 26px 80px rgba(0,0,0,.45),0 0 44px rgba(119,82,255,.09); }
.trx-utility-card::before { content:""; position:absolute; top:0; left:12%; right:12%; height:2px; background:linear-gradient(90deg,transparent,var(--trx-cyan),var(--trx-violet),var(--trx-pink),transparent); }
.trx-utility-card h1,.trx-utility-card h2 { color:#f4f7ff; font-size:clamp(1.45rem,3vw,2rem); font-weight:900; letter-spacing:-.035em; }
.trx-utility-card p,.trx-utility-card li { color:#aebbd7; line-height:1.75; overflow-wrap:anywhere; }
.trx-utility-page .btn { border:1px solid rgba(190,214,255,.18); border-radius:12px; padding:.75rem 1.1rem; font-weight:850; background:linear-gradient(105deg,#19bce3,#586cff 43%,#9258ee 73%,#d84fcd); color:#fff; box-shadow:0 12px 27px rgba(81,99,255,.18); }
.trx-utility-page .btn:hover { transform:translateY(-2px); filter:brightness(1.08); }
.trx-utility-page .form-control { color:#eff5ff; background:rgba(4,8,18,.83); border:1px solid rgba(128,153,220,.22); border-radius:12px; }
.trx-utility-page .table { color:#d2dcf4; }
.trx-utility-page .table th { color:#9db0d5; }

@keyframes trxSurfaceIn { from { opacity: .0; transform: translateY(8px) scale(.995); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   TRX EDITION VIP PANEL — October 2026 key-system and global UI refresh
   Presentation-only layer; no routes, form names or business rules here.
   ===================================================================== */
:root {
  --trx-panel-bg: #070b16;
  --trx-panel-surface: rgba(14, 20, 39, .88);
  --trx-panel-line: rgba(127, 164, 255, .18);
  --trx-panel-text: #f4f7ff;
  --trx-panel-muted: #91a0c0;
  --trx-panel-cyan: #40e5f5;
  --trx-panel-blue: #5c83ff;
  --trx-panel-violet: #9a63ff;
  --trx-panel-pink: #fb63d4;
  --trx-panel-green: #57efb6;
}
body.is-authenticated {
  background-color: var(--trx-panel-bg) !important;
  background-image:
    radial-gradient(900px 540px at 0% 0%, rgba(70, 102, 255, .13), transparent 64%),
    radial-gradient(760px 500px at 100% 14%, rgba(64, 229, 245, .075), transparent 62%),
    radial-gradient(760px 520px at 65% 110%, rgba(251, 99, 212, .055), transparent 65%),
    linear-gradient(140deg, #050711 0%, #0a1022 54%, #070a16 100%) !important;
  color: var(--trx-panel-text) !important;
}
body.is-authenticated main > .container { max-width: 1460px !important; padding-top: clamp(18px, 3vw, 34px) !important; }
body.is-authenticated .card,
body.is-authenticated .modal-content {
  color: var(--trx-panel-text);
  background: linear-gradient(145deg, rgba(15, 22, 43, .94), rgba(8, 12, 26, .92)) !important;
  border: 1px solid var(--trx-panel-line) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 72px rgba(0, 0, 0, .27), inset 0 1px 0 rgba(255,255,255,.035) !important;
  overflow: hidden;
}
body.is-authenticated .card-header,
body.is-authenticated .modal-header {
  color: var(--trx-panel-text) !important;
  border-bottom: 1px solid rgba(127,164,255,.14) !important;
  background: linear-gradient(105deg, rgba(64,229,245,.055), rgba(92,131,255,.055), rgba(251,99,212,.035)) !important;
}
body.is-authenticated .card-body,
body.is-authenticated .modal-body { color: var(--trx-panel-text); }
body.is-authenticated h1, body.is-authenticated h2, body.is-authenticated h3,
body.is-authenticated h4, body.is-authenticated h5, body.is-authenticated label,
body.is-authenticated legend { color: #f5f7ff; }
body.is-authenticated .form-control,
body.is-authenticated .form-select,
body.is-authenticated textarea,
body.is-authenticated input[type="text"],
body.is-authenticated input[type="number"],
body.is-authenticated input[type="password"],
body.is-authenticated input[type="email"] {
  color: #eff5ff !important;
  background-color: rgba(5, 10, 24, .9) !important;
  border: 1px solid rgba(131, 158, 230, .23) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important;
  min-height: 44px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
body.is-authenticated .form-control::placeholder,
body.is-authenticated textarea::placeholder { color: #6e7d9d !important; opacity: 1; }
body.is-authenticated .form-control:focus,
body.is-authenticated .form-select:focus,
body.is-authenticated textarea:focus,
body.is-authenticated input:focus {
  border-color: rgba(64,229,245,.62) !important;
  box-shadow: 0 0 0 3px rgba(64,229,245,.085), 0 0 24px rgba(92,131,255,.08) !important;
  outline: 0;
}
body.is-authenticated .form-label { color: #c8d3ed; font-size: .82rem; font-weight: 800; letter-spacing: .025em; }
body.is-authenticated .form-text,
body.is-authenticated .text-muted,
body.is-authenticated small.text-muted { color: var(--trx-panel-muted) !important; }
body.is-authenticated .btn {
  border-radius: 11px;
  font-weight: 800;
  transition: transform .17s ease, box-shadow .17s ease, filter .17s ease, border-color .17s ease;
}
body.is-authenticated .btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.07); }
body.is-authenticated .btn:focus-visible,
body.is-authenticated a:focus-visible { outline: 2px solid var(--trx-panel-cyan); outline-offset: 3px; }
body.is-authenticated .btn-primary,
body.is-authenticated .btn-success,
body.is-authenticated .btn-animated,
body.is-authenticated .btn-custom {
  color: #06111b !important;
  border: 1px solid rgba(174,249,255,.32) !important;
  background: linear-gradient(105deg, #40e5f5 0%, #6a8bff 48%, #ad66fb 78%, #fb63d4 100%) !important;
  box-shadow: 0 10px 28px rgba(92,131,255,.19), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
body.is-authenticated .btn-outline-primary,
body.is-authenticated .btn-outline-info,
body.is-authenticated .btn-outline-light,
body.is-authenticated .btn-outline-secondary {
  color: #cde8ff !important;
  border-color: rgba(126,166,255,.26) !important;
  background: rgba(82,119,205,.07) !important;
}
body.is-authenticated .btn-danger,
body.is-authenticated .btn-outline-danger { border-color: rgba(255,104,139,.3) !important; }
body.is-authenticated .dropdown-menu {
  padding: 8px;
  color: var(--trx-panel-text);
  background: rgba(8, 13, 29, .98) !important;
  border: 1px solid rgba(127,164,255,.22) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 52px rgba(0,0,0,.4) !important;
  backdrop-filter: blur(20px);
}
body.is-authenticated .dropdown-item { color: #cbd6f0 !important; border-radius: 9px; padding: .62rem .78rem; }
body.is-authenticated .dropdown-item:hover,
body.is-authenticated .dropdown-item:focus { color: #fff !important; background: linear-gradient(105deg,rgba(64,229,245,.10),rgba(154,99,255,.12)) !important; }
body.is-authenticated .dropdown-divider { border-color: rgba(127,164,255,.14) !important; }
body.is-authenticated .table { --bs-table-color: #ced8ef; --bs-table-bg: transparent; --bs-table-border-color: rgba(127,164,255,.12); color: #ced8ef !important; }
body.is-authenticated .table thead th { color: #9caed3 !important; background: rgba(64,229,245,.035) !important; font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; border-bottom-color: rgba(127,164,255,.2) !important; }
body.is-authenticated .table tbody tr { border-color: rgba(127,164,255,.10); transition: background .15s ease; }
body.is-authenticated .table tbody tr:hover { --bs-table-accent-bg: rgba(92,131,255,.055); color: #f4f7ff !important; }
body.is-authenticated .alert { border-radius: 13px; border-width: 1px; background: rgba(25,35,62,.72); color: #e7efff; }
body.is-authenticated .alert-success { border-color: rgba(87,239,182,.25); background: rgba(31,150,115,.12); }
body.is-authenticated .alert-danger { border-color: rgba(255,104,139,.28); background: rgba(204,55,90,.12); }
body.is-authenticated .alert-warning { border-color: rgba(255,207,112,.25); background: rgba(185,127,32,.12); }
body.is-authenticated .pagination .page-link { color: #cbd8f5; background: rgba(9,15,34,.92); border-color: rgba(127,164,255,.16); }
body.is-authenticated .pagination .page-item.active .page-link { color: #06111b; border-color: transparent; background: linear-gradient(105deg,#40e5f5,#8d73ff); }

/* Page-level composition */
.trx-key-page { width: 100%; max-width: 1400px; margin: 0 auto; animation: trxPanelEnter .42s cubic-bezier(.2,.7,.25,1) both; }
@keyframes trxPanelEnter { from {opacity:0; transform:translateY(9px)} to {opacity:1; transform:translateY(0)} }
.trx-page-hero { position:relative; isolation:isolate; display:flex; align-items:center; justify-content:space-between; gap:26px; min-height:218px; padding:clamp(23px,4vw,42px); margin:0 0 20px; border:1px solid rgba(119,154,255,.24); border-radius:24px; overflow:hidden; background:linear-gradient(115deg,rgba(13,21,43,.97),rgba(10,16,34,.91) 58%,rgba(24,12,37,.92)); box-shadow:0 24px 66px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035); }
.trx-page-hero::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(120deg,transparent 15%,rgba(64,229,245,.06) 48%,transparent 72%), radial-gradient(460px 260px at 100% 0%,rgba(154,99,255,.15),transparent 76%); }
.trx-page-hero::after { content:""; position:absolute; top:0; left:8%; right:8%; height:1px; background:linear-gradient(90deg,transparent,rgba(64,229,245,.6),rgba(154,99,255,.52),rgba(251,99,212,.4),transparent); }
.trx-page-hero-copy { position:relative; z-index:1; max-width:780px; }
.trx-eyebrow { display:flex; align-items:center; gap:9px; color:#93a5ca; font-size:.67rem; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.trx-live-dot { width:7px; height:7px; flex:none; border-radius:50%; background:var(--trx-panel-green); box-shadow:0 0 12px rgba(87,239,182,.7); animation:trxDotPulse 2.2s ease-in-out infinite; }
@keyframes trxDotPulse { 50% { box-shadow:0 0 0 5px rgba(87,239,182,.07),0 0 17px rgba(87,239,182,.78); } }
.trx-page-hero h1 { margin:12px 0 9px; color:#f7f9ff; font-size:clamp(2rem,4.7vw,3.55rem); font-weight:950; line-height:1.04; letter-spacing:-.055em; }
.trx-page-hero h1 span { background:linear-gradient(100deg,#dcfbff 0%,#40e5f5 28%,#8c9aff 62%,#f88de5 100%); color:transparent; -webkit-background-clip:text; background-clip:text; }
.trx-page-hero p { max-width:640px; margin:0; color:#95a4c2; font-size:.91rem; line-height:1.7; }
.trx-hero-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.trx-hero-tags span { display:inline-flex; align-items:center; gap:7px; padding:6px 10px; color:#b4c6e8; font-size:.68rem; font-weight:800; border:1px solid rgba(127,164,255,.16); border-radius:999px; background:rgba(255,255,255,.025); }
.trx-hero-tags i { color:var(--trx-panel-cyan); }
.trx-key-hero-actions { position:relative; z-index:2; display:flex; flex-direction:column; gap:10px; min-width:175px; }
.trx-btn-primary, body.is-authenticated .trx-btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:.76rem 1.05rem; color:#04121d !important; font-weight:900; border:1px solid rgba(186,248,255,.35) !important; background:linear-gradient(105deg,#40e5f5,#6e8cff 52%,#a768ff 78%,#f46ddc) !important; box-shadow:0 11px 26px rgba(92,131,255,.19),inset 0 1px 0 rgba(255,255,255,.38) !important; }
.trx-btn-secondary, body.is-authenticated .trx-btn-secondary { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:.65rem .95rem; color:#dce8ff !important; font-weight:800; border:1px solid rgba(127,164,255,.22) !important; background:rgba(85,115,194,.09) !important; }
.trx-btn-ghost, body.is-authenticated .trx-btn-ghost { display:inline-flex; align-items:center; justify-content:center; gap:8px; color:#aab9d9 !important; border:1px solid rgba(127,164,255,.17) !important; background:rgba(255,255,255,.02) !important; }
.trx-hero-orbit { position:absolute; z-index:0; right:12%; top:50%; width:150px; height:150px; border:1px solid rgba(64,229,245,.12); border-radius:50%; transform:translate(50%,-50%); opacity:.6; pointer-events:none; }
.trx-hero-orbit::before,.trx-hero-orbit::after { content:""; position:absolute; inset:17px; border:1px solid rgba(154,99,255,.22); border-radius:50%; }
.trx-hero-orbit::after { inset:37px; border-color:rgba(251,99,212,.28); }
.trx-hero-orbit span { position:absolute; width:9px; height:9px; top:22px; left:26px; border-radius:50%; background:#40e5f5; box-shadow:0 0 16px #40e5f5; }
.trx-hero-orbit i { position:absolute; width:7px; height:7px; right:15px; bottom:33px; border-radius:50%; background:#fb63d4; box-shadow:0 0 15px #fb63d4; }
.trx-hero-orbit b { position:absolute; width:6px; height:6px; right:43px; top:3px; border-radius:50%; background:#9a63ff; box-shadow:0 0 15px #9a63ff; }
.trx-metric-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0 0 20px; }
.trx-metric-card { position:relative; min-width:0; padding:20px 21px; overflow:hidden; border:1px solid rgba(127,164,255,.17); border-radius:18px; background:linear-gradient(140deg,rgba(14,22,44,.91),rgba(8,13,29,.9)); box-shadow:0 16px 45px rgba(0,0,0,.16); }
.trx-metric-card::after { content:""; position:absolute; top:0; left:16%; right:16%; height:1px; background:linear-gradient(90deg,transparent,rgba(64,229,245,.44),transparent); }
.trx-metric-icon { display:grid; place-items:center; width:38px; height:38px; margin-bottom:12px; border-radius:12px; color:#06121d; background:linear-gradient(135deg,#40e5f5,#5f91ff); box-shadow:0 8px 20px rgba(64,229,245,.12); }
.trx-metric-icon.cyan { background:linear-gradient(135deg,#40e5f5,#58caff); }
.trx-metric-icon.pink { background:linear-gradient(135deg,#9b7aff,#fb63d4); }
.trx-metric-label { display:block; margin-bottom:5px; color:#91a0c0; font-size:.72rem; font-weight:800; }
.trx-metric-card strong { display:block; color:#f4f7ff; font-size:1.45rem; line-height:1.2; font-weight:950; letter-spacing:-.025em; }
.trx-metric-card small { display:block; margin-top:8px; color:#7181a2; font-size:.68rem; }
.trx-panel-card { margin:0 0 20px; }
.trx-panel-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:18px 21px !important; }
.trx-panel-heading { display:flex; align-items:center; gap:12px; min-width:0; }
.trx-panel-heading-icon { display:grid; place-items:center; width:43px; height:43px; flex:none; border-radius:14px; color:#07131e; background:linear-gradient(135deg,#40e5f5,#7281ff 68%,#b56aff); box-shadow:0 9px 24px rgba(92,131,255,.15); font-size:1.08rem; }
.trx-panel-heading h2 { margin:0; color:#f4f7ff; font-size:1.02rem; font-weight:900; letter-spacing:-.02em; }
.trx-panel-heading p { margin:4px 0 0; color:#8292b2; font-size:.74rem; }
.trx-panel-tools { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.trx-panel-body { padding:21px !important; }
.trx-tools-menu { min-width:240px; }
.trx-tools-menu .dropdown-item { display:flex; align-items:center; gap:10px; font-size:.81rem; }
.trx-tools-menu .dropdown-item i { width:17px; color:#5cdff2; text-align:center; }
.trx-table-hint { display:flex; align-items:flex-start; gap:9px; margin:0 0 16px; padding:11px 13px; color:#9bafd0; font-size:.72rem; line-height:1.55; border:1px solid rgba(127,164,255,.13); border-radius:12px; background:rgba(67,104,188,.055); }
.trx-table-hint i { color:#43d9f0; font-size:.9rem; margin-top:1px; }
.trx-table-wrap { border:1px solid rgba(127,164,255,.12); border-radius:15px; background:rgba(4,8,21,.26); }
#datatable_wrapper { padding:14px; color:#91a0c0; font-size:.76rem; }
#datatable_wrapper .row { align-items:center; row-gap:10px; }
#datatable_wrapper .dataTables_length label,
#datatable_wrapper .dataTables_filter label { display:flex; align-items:center; gap:9px; flex-wrap:wrap; color:#93a2c0; font-size:.75rem; font-weight:700; }
#datatable_wrapper .dataTables_filter { text-align:right; }
#datatable_wrapper .dataTables_filter input,
#datatable_wrapper .dataTables_length select { min-height:37px; margin:0 !important; padding:7px 11px; color:#e9f1ff; background:#080e21; border:1px solid rgba(127,164,255,.2); border-radius:10px; outline:0; }
#datatable_wrapper .dataTables_filter input:focus { border-color:rgba(64,229,245,.6); box-shadow:0 0 0 3px rgba(64,229,245,.07); }
#datatable { margin:0 !important; border-collapse:separate !important; border-spacing:0; }
#datatable thead th { padding:14px 11px !important; border-top:0 !important; border-bottom:1px solid rgba(127,164,255,.18) !important; white-space:nowrap; }
#datatable tbody td { padding:13px 10px !important; border-color:rgba(127,164,255,.10) !important; vertical-align:middle; }
#datatable tbody tr:last-child td { border-bottom:0; }
.trx-game-pill,.trx-device-pill,.trx-expiry-pill,.trx-not-started { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:6px 9px; border-radius:9px; font-size:.7rem; white-space:nowrap; }
.trx-game-pill { color:#a5eefa; border:1px solid rgba(64,229,245,.15); background:rgba(64,229,245,.065); font-weight:850; }
.trx-device-pill { color:#c7d5f4; border:1px solid rgba(127,164,255,.14); background:rgba(127,164,255,.055); font-variant-numeric:tabular-nums; }
.trx-expiry-pill { color:#d9d4ff; border:1px solid rgba(154,99,255,.19); background:rgba(154,99,255,.065); }
.trx-not-started { color:#bdc8df; border:1px dashed rgba(127,164,255,.2); background:rgba(255,255,255,.018); }
.trx-key-value { display:inline-block; max-width:240px; color:#eff5ff; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.76rem; font-weight:800; letter-spacing:.01em; overflow-wrap:anywhere; transition:filter .2s ease; }
.trx-key-value.is-active { color:#80efc3; }
.trx-key-value.is-inactive { color:#ff9cac; }
.trx-key-value.key-sensi { filter:blur(5px); user-select:none; }
.trx-duration-value { color:#c8d5ed; font-weight:750; }
.trx-row-actions { display:flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; }
body.is-authenticated .trx-icon-btn { display:inline-grid; place-items:center; width:34px; height:34px; padding:0; color:#b9c7e6; border:1px solid rgba(127,164,255,.19); border-radius:10px; background:rgba(255,255,255,.025); text-decoration:none; cursor:pointer; }
body.is-authenticated .trx-icon-btn.reset { color:#6fe3f3; }
body.is-authenticated .trx-icon-btn.delete { color:#ff9cad; }
body.is-authenticated .trx-icon-btn.edit { color:#ad9bff; }
body.is-authenticated .trx-icon-btn:hover:not(:disabled) { color:#fff; border-color:rgba(64,229,245,.45); background:rgba(64,229,245,.08); box-shadow:0 6px 17px rgba(0,0,0,.18); }
body.is-authenticated .trx-icon-btn:disabled { opacity:.45; cursor:wait; }
#datatable_wrapper .dataTables_info { padding-top:16px; color:#7787a8; }
#datatable_wrapper .dataTables_paginate { padding-top:10px; }
#datatable_wrapper .pagination { gap:4px; }
#datatable_wrapper .page-item .page-link { border-radius:8px; font-size:.72rem; }
#datatable_processing { color:#e6f8ff !important; background:rgba(8,14,32,.94) !important; border:1px solid rgba(64,229,245,.22); border-radius:12px; padding:13px 20px !important; box-shadow:0 16px 40px rgba(0,0,0,.32); }
.trx-page-signature { display:flex; align-items:center; justify-content:center; gap:13px; margin:22px 0 6px; color:#697898; font-size:.62rem; font-weight:900; letter-spacing:.22em; text-align:center; }
.trx-signature-line { width:min(90px,14vw); height:1px; background:linear-gradient(90deg,transparent,rgba(127,164,255,.3),transparent); }

/* Generation page */
.trx-generate-hero { min-height:204px; }
.trx-generate-hero .trx-page-hero-copy { max-width:760px; }
.trx-generate-hero-mark { position:relative; display:grid; place-items:center; width:146px; height:146px; flex:none; margin-right:24px; }
.trx-generate-core { position:relative; z-index:2; display:grid; place-items:center; width:70px; height:70px; color:#05121d; border-radius:22px; background:linear-gradient(140deg,#40e5f5,#7683ff 63%,#b66dff); box-shadow:0 0 46px rgba(64,229,245,.22),0 12px 30px rgba(92,131,255,.22); font-size:1.75rem; transform:rotate(-8deg); }
.trx-generate-core i { transform:rotate(8deg); }
.trx-generate-hero-mark .ring { position:absolute; inset:0; border:1px solid rgba(64,229,245,.21); border-radius:50%; animation:trxRingSpin 14s linear infinite; }
.trx-generate-hero-mark .ring-one::before,.trx-generate-hero-mark .ring-two::before,.trx-generate-hero-mark .ring-three::before { content:""; position:absolute; top:13%; left:18%; width:8px; height:8px; border-radius:50%; background:#40e5f5; box-shadow:0 0 15px #40e5f5; }
.trx-generate-hero-mark .ring-two { inset:12px; border-color:rgba(154,99,255,.32); animation-direction:reverse; animation-duration:11s; }
.trx-generate-hero-mark .ring-two::before { top:auto; left:auto; bottom:9%; right:14%; background:#b278ff; box-shadow:0 0 15px #b278ff; }
.trx-generate-hero-mark .ring-three { inset:26px; border-style:dashed; border-color:rgba(251,99,212,.3); animation-duration:22s; }
.trx-generate-hero-mark .ring-three::before { top:4%; left:48%; width:5px; height:5px; background:#fb63d4; box-shadow:0 0 12px #fb63d4; }
@keyframes trxRingSpin { to { transform:rotate(360deg); } }
.trx-generated-result { position:relative; margin:0 0 20px; padding:22px; overflow:hidden; border:1px solid rgba(87,239,182,.25); border-radius:20px; background:linear-gradient(130deg,rgba(17,55,53,.51),rgba(11,20,38,.92) 62%,rgba(32,15,44,.63)); box-shadow:0 18px 50px rgba(0,0,0,.2); }
.trx-generated-result::before { content:""; position:absolute; top:0; left:10%; right:10%; height:1px; background:linear-gradient(90deg,transparent,#57efb6,#40e5f5,transparent); }
.trx-result-top { display:flex; align-items:center; gap:13px; }
.trx-result-icon { display:grid; place-items:center; width:45px; height:45px; color:#031c19; border-radius:14px; background:linear-gradient(140deg,#57efb6,#40e5f5); font-size:1.25rem; }
.trx-result-top h2 { margin:4px 0 0; color:#f4fff9; font-size:1.1rem; font-weight:900; }
.trx-result-badge { margin-left:auto; padding:6px 9px; color:#7cf0be; border:1px solid rgba(87,239,182,.22); border-radius:999px; font-size:.62rem; font-weight:900; letter-spacing:.12em; }
.trx-result-key-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:18px 0 14px; padding:12px; border:1px solid rgba(87,239,182,.14); border-radius:13px; background:rgba(0,0,0,.17); }
.trx-result-key-row code { color:#a6ffdc; font-size:clamp(.85rem,2vw,1.05rem); font-weight:900; overflow-wrap:anywhere; }
.trx-result-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.trx-result-meta span { display:flex; flex-direction:column; gap:3px; padding:11px 12px; border-radius:11px; background:rgba(255,255,255,.027); }
.trx-result-meta small { color:#8295af; font-size:.67rem; }
.trx-result-meta strong { color:#edf7ff; font-size:.8rem; overflow-wrap:anywhere; }
.trx-result-footnote { display:flex; gap:8px; margin:14px 0 0; color:#91a8bb; font-size:.72rem; line-height:1.6; }
.trx-result-footnote i { color:#57efb6; }
.trx-generate-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(240px,.8fr); gap:18px; align-items:start; }
.trx-generator-card .card-body { padding:clamp(18px,3vw,28px) !important; }
.trx-secure-chip { display:inline-flex; align-items:center; gap:6px; padding:7px 9px; color:#82eec8; border:1px solid rgba(87,239,182,.19); border-radius:99px; background:rgba(87,239,182,.055); font-size:.61rem; font-weight:900; letter-spacing:.1em; }
.trx-form-section-label { display:flex; align-items:center; gap:11px; margin:0 0 17px; }
.trx-form-section-label > span { display:grid; place-items:center; width:30px; height:30px; flex:none; color:#04131d; border-radius:10px; background:linear-gradient(140deg,#40e5f5,#8582ff); font-size:.7rem; font-weight:950; }
.trx-form-section-label strong,.trx-custom-key-heading strong { display:block; color:#eaf1ff; font-size:.86rem; font-weight:900; }
.trx-form-section-label small,.trx-custom-key-heading small { display:block; margin-top:3px; color:#7f90b2; font-size:.68rem; }
.trx-input-wrap { position:relative; }
.trx-input-wrap > i { position:absolute; z-index:2; top:50%; left:13px; transform:translateY(-50%); color:#6ba6db; pointer-events:none; }
.trx-input-wrap .form-control { padding-left:39px !important; }
.trx-form-divider { display:flex; align-items:center; gap:13px; margin:22px 0; color:#7284a6; font-size:.66rem; font-weight:900; letter-spacing:.2em; }
.trx-form-divider::before,.trx-form-divider::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(127,164,255,.22)); }
.trx-form-divider::after { transform:scaleX(-1); }
.trx-custom-key-panel { padding:17px; border:1px solid rgba(154,99,255,.2); border-radius:15px; background:linear-gradient(130deg,rgba(92,67,164,.09),rgba(10,18,39,.25)); }
.trx-custom-key-heading { display:flex; align-items:center; gap:10px; margin-bottom:17px; }
.trx-custom-key-icon { display:grid; place-items:center; width:37px; height:37px; color:#e0d0ff; border:1px solid rgba(154,99,255,.24); border-radius:12px; background:rgba(154,99,255,.1); font-size:1.05rem; }
.trx-optional-badge { margin-left:auto; padding:5px 8px; color:#b5a2ff; border:1px solid rgba(154,99,255,.21); border-radius:999px; font-size:.57rem; font-weight:900; letter-spacing:.12em; }
.trx-custom-key-input { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.025em; }
.trx-custom-key-status { display:flex; align-items:flex-start; gap:8px; margin-top:11px; color:#8192b1; font-size:.69rem; line-height:1.5; }
.trx-custom-key-status i { margin-top:1px; }
.trx-custom-key-status.is-custom { color:#83edc5; }
.trx-custom-key-status.is-custom i { color:#57efb6; }
.trx-estimate-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:20px 0 0; padding:15px 16px; border:1px solid rgba(64,229,245,.15); border-radius:14px; background:linear-gradient(100deg,rgba(64,229,245,.055),rgba(92,131,255,.045)); }
.trx-estimate-label { display:block; color:#dce8ff; font-size:.83rem; font-weight:900; }
.trx-estimate-row small { display:block; margin-top:4px; color:#8191af; font-size:.67rem; }
.trx-estimate-value { color:#81f4d1; font-size:clamp(1.15rem,3vw,1.5rem); font-weight:950; font-variant-numeric:tabular-nums; white-space:nowrap; }
.trx-form-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.trx-form-actions .trx-generate-submit { min-width:210px; flex:1; }
.trx-generation-side { display:grid; gap:14px; }
.trx-side-info-card { position:relative; padding:20px; overflow:hidden; border:1px solid rgba(127,164,255,.17); border-radius:18px; background:linear-gradient(145deg,rgba(15,23,45,.93),rgba(8,13,29,.91)); box-shadow:0 16px 42px rgba(0,0,0,.15); }
.trx-side-info-card::after { content:""; position:absolute; top:0; left:20%; right:20%; height:1px; background:linear-gradient(90deg,transparent,rgba(64,229,245,.42),transparent); }
.trx-side-card-icon { display:grid; place-items:center; width:40px; height:40px; margin-bottom:14px; border-radius:13px; color:#06131c; background:linear-gradient(140deg,#40e5f5,#7a83ff); font-size:1.15rem; }
.trx-side-info-card .trx-eyebrow { font-size:.59rem; }
.trx-balance-value { display:block; margin:6px 0 9px; color:#8df2ca; font-size:1.85rem; font-weight:950; letter-spacing:-.04em; }
.trx-side-info-card p { margin:0; color:#8798b8; font-size:.72rem; line-height:1.65; }
.trx-side-info-card-alt .trx-side-card-icon { color:#e5d7ff; background:linear-gradient(140deg,#9173ff,#dc69e8); }
.trx-side-info-card-alt > strong { display:block; margin-bottom:7px; color:#e5eaff; font-size:.85rem; }
.trx-side-note { display:flex; align-items:flex-start; gap:10px; padding:14px; color:#91a2c2; border:1px solid rgba(255,207,112,.15); border-radius:14px; background:rgba(185,127,32,.055); }
.trx-side-note > i { color:#ffd071; font-size:1.05rem; }
.trx-side-note strong { display:block; color:#e9d9b7; font-size:.75rem; }
.trx-side-note small { display:block; margin-top:3px; color:#9b906f; font-size:.67rem; line-height:1.6; }

@media (max-width: 992px) {
  .trx-page-hero { align-items:flex-start; }
  .trx-hero-orbit { right:5%; opacity:.35; }
  .trx-generate-layout { grid-template-columns:minmax(0,1fr); }
  .trx-generation-side { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .trx-side-note { grid-column:1 / -1; }
}
@media (max-width: 700px) {
  body.is-authenticated main > .container { padding-left:12px !important; padding-right:12px !important; }
  .trx-page-hero { display:block; min-height:unset; padding:22px 19px; border-radius:19px; }
  .trx-page-hero h1 { font-size:2rem; }
  .trx-page-hero p { font-size:.8rem; }
  .trx-hero-orbit { right:-36px; top:35%; transform:translate(0,-50%) scale(.76); }
  .trx-key-hero-actions { display:grid; grid-template-columns:1fr 1fr; margin-top:20px; min-width:0; }
  .trx-key-hero-actions .btn { padding:.7rem .55rem; font-size:.74rem; }
  .trx-metric-grid { grid-template-columns:1fr; gap:9px; }
  .trx-metric-card { display:grid; grid-template-columns:38px 1fr; column-gap:12px; align-items:center; padding:13px 14px; }
  .trx-metric-icon { grid-row:span 3; margin:0; }
  .trx-metric-label { margin:0; }
  .trx-metric-card strong { font-size:1.15rem; }
  .trx-metric-card small { margin-top:2px; }
  .trx-panel-head { padding:14px !important; }
  .trx-panel-heading { gap:9px; }
  .trx-panel-heading-icon { width:37px; height:37px; border-radius:11px; }
  .trx-panel-heading h2 { font-size:.91rem; }
  .trx-panel-heading p { max-width:220px; font-size:.66rem; }
  .trx-panel-tools { width:100%; justify-content:stretch; }
  .trx-panel-tools > .btn,.trx-panel-tools .dropdown { flex:1; }
  .trx-panel-tools .dropdown > button { width:100%; }
  .trx-panel-body { padding:12px !important; }
  #datatable_wrapper { padding:4px; }
  #datatable_wrapper .dataTables_filter { text-align:left; }
  #datatable_wrapper .dataTables_filter label { width:100%; align-items:flex-start; }
  #datatable_wrapper .dataTables_filter input { width:100% !important; margin-left:0 !important; }
  #datatable_wrapper .dataTables_length label { justify-content:space-between; width:100%; }
  #datatable { min-width:850px; }
  #datatable tbody td { padding:11px 8px !important; }
  .trx-generate-hero-mark { position:absolute; right:-17px; top:18px; opacity:.32; transform:scale(.72); transform-origin:top right; }
  .trx-generate-hero .trx-page-hero-copy { position:relative; z-index:2; }
  .trx-generated-result { padding:15px; }
  .trx-result-top { align-items:flex-start; }
  .trx-result-badge { display:none; }
  .trx-result-key-row { align-items:stretch; flex-direction:column; }
  .trx-result-key-row .btn { width:100%; }
  .trx-result-meta { grid-template-columns:1fr; gap:7px; }
  .trx-result-meta span { flex-direction:row; justify-content:space-between; gap:12px; }
  .trx-generation-side { grid-template-columns:1fr; }
  .trx-side-note { grid-column:auto; }
  .trx-custom-key-panel { padding:13px; }
  .trx-custom-key-heading { align-items:flex-start; }
  .trx-custom-key-heading > div { flex:1; }
  .trx-optional-badge { margin-top:1px; }
  .trx-form-actions { flex-direction:column; }
  .trx-form-actions .btn { width:100%; }
  .trx-page-signature { font-size:.53rem; letter-spacing:.15em; }
}
@media (prefers-reduced-motion: reduce) {
  .trx-key-page,.trx-live-dot,.trx-generate-hero-mark .ring { animation:none !important; }
}


/* Native fallback table controls — active when optional DataTables CDN is unavailable. */
.trx-native-table-controls{display:grid;grid-template-columns:minmax(180px,1fr) auto auto;gap:12px;align-items:end;margin:0 0 16px;padding:14px;border:1px solid var(--trx-line);border-radius:15px;background:rgba(8,12,24,.56)}
.trx-native-search,.trx-native-length{display:grid;gap:6px;color:#b8c5df;font-size:.76rem;font-weight:800;letter-spacing:.035em}
.trx-native-length select{min-width:84px}
.trx-native-count{color:var(--trx-muted);font-size:.78rem;font-weight:700;text-align:right;align-self:center}
.trx-native-paging{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px}
.trx-native-paging .btn:disabled{opacity:.35;cursor:not-allowed}
.trx-native-empty{padding:28px 12px!important;color:var(--trx-muted)!important;text-align:center!important}
@media(max-width:680px){.trx-native-table-controls{grid-template-columns:1fr 86px}.trx-native-search{grid-column:1/-1}.trx-native-count{grid-column:1/-1;text-align:left}.trx-native-paging{grid-column:1/-1}.trx-premium-table{min-width:720px}}