:root {
  --tgrom-accent: #3bd7ff;
  --tgrom-accent-strong: #7c6dff;
  --tgrom-violet: #b06cff;
  --tgrom-surface: rgba(24, 35, 49, .84);
  --tgrom-glow: rgba(59, 215, 255, .24);
}

body { background-color: #0b111a; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px), radial-gradient(circle at 18% -10%, rgba(59,215,255,.14), transparent 34%), radial-gradient(circle at 90% 0%, rgba(124,109,255,.14), transparent 30%); background-size: 42px 42px, 42px 42px, auto, auto; }
html { scroll-behavior: smooth; }
body::before, body::after { content: ''; position: fixed; z-index: -1; width: 42vw; height: 42vw; max-width: 580px; max-height: 580px; border-radius: 50%; filter: blur(80px); opacity: .11; pointer-events: none; animation: tgrom-orbit 16s ease-in-out infinite alternate; }
body::before { top: 8vh; left: -18vw; background: #24c6ef; }
body::after { right: -18vw; bottom: 2vh; background: #7658ff; animation-delay: -7s; }
.tm-header { background: rgba(13, 22, 33, .9) !important; border-bottom: 1px solid rgba(120, 205, 255, .11); box-shadow: 0 12px 40px rgba(0,0,0,.16); backdrop-filter: blur(16px); }
.tm-main { position: relative; }
.tm-main::before { content: ''; position: absolute; z-index: -1; width: 420px; height: 240px; top: -120px; left: calc(50% - 210px); background: radial-gradient(ellipse, rgba(59,215,255,.12), transparent 70%); pointer-events: none; }
.tm-main-intro, .tm-main-premium-intro { position: relative; }
.tm-main-intro::after, .tm-main-premium-intro::after { content: ''; position: absolute; inset: -24px -32px auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(59,215,255,.45), rgba(176,108,255,.45), transparent); opacity: .65; }
.tm-main-intro-header, .tm-main-premium-intro-header { font-weight: 800; }
.tm-section, .tm-section-box, .tm-main-premium-option, .tm-catalog-grid-wrap { border-color: rgba(142, 205, 236, .12) !important; }
.tm-main-premium-option, .tm-section-box { background: linear-gradient(145deg, rgba(27,40,56,.82), rgba(16,25,37,.76)); box-shadow: 0 16px 45px rgba(0,0,0,.12), inset 0 1px rgba(255,255,255,.035); }
.tm-logo { gap: 9px; transition: transform .22s ease, filter .22s ease; }
.tm-logo:hover { transform: translateY(-1px); filter: drop-shadow(0 0 13px var(--tgrom-glow)); }
.tm-logo-icon { width: 32px !important; height: 32px !important; margin: 0 !important; padding: 0 !important; background: url('/logo.svg') center / contain no-repeat !important; animation: tgrom-pulse 5s ease-in-out infinite; }
.tm-logo-text { width: 103px !important; height: 32px !important; background: none !important; position: relative; }
.tm-logo-text::after { content: 'TGROM'; position: absolute; inset: 0; color: #f4fbff; font: 800 25px/32px Roboto, Arial, sans-serif; letter-spacing: 2.5px; text-shadow: 0 0 18px rgba(59,185,239,.23); }
.tm-header-tab, .tm-header-action, .btn, .tm-form-radio-item, .tm-currency-tab { transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.tm-header-tab:hover, .tm-header-tab:focus-visible { color: var(--tgrom-accent) !important; }
.btn:hover:not(:disabled), .tm-header-action:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(0,0,0,.18); }
.btn-primary { background-image: linear-gradient(110deg, var(--tgrom-accent-strong), var(--tgrom-accent)) !important; border: 0 !important; }
.btn-primary:hover:not(:disabled) { box-shadow: 0 7px 22px rgba(59,215,255,.28), 0 0 0 1px rgba(255,255,255,.15) inset; }
.tm-form-radio-item:hover, .tm-currency-tab:hover { box-shadow: 0 0 0 1px rgba(59,185,239,.4); }
.tm-table tbody tr { transition: background-color .18s ease, transform .18s ease; }
.tm-table tbody tr:hover { transform: translateX(2px); }
.tm-dropdown.open > .dropdown-menu { animation: tgrom-menu-in .16s ease-out both; }
.popup-container:not(.hide) .popup { animation: tgrom-popup-in .2s cubic-bezier(.2,.8,.2,1) both; }
.tm-currency-tab:has(.radio:checked) { box-shadow: 0 0 0 2px var(--tgrom-accent), 0 0 18px var(--tgrom-glow); }
.tm-search-field:focus-within, .tm-coin-field:focus-within { box-shadow: 0 0 0 2px var(--tgrom-accent), 0 0 20px var(--tgrom-glow); }
.tm-main-intro-header, .tm-main-premium-intro h1 { letter-spacing: -.03em; text-shadow: 0 0 30px rgba(59,215,255,.14); }
.tm-main-intro-text, .tm-main-premium-intro-text { color: #9db1c2; }
.tm-input, .form-control { background: rgba(30, 45, 61, .82) !important; border-color: rgba(155, 212, 238, .1) !important; box-shadow: inset 0 1px rgba(255,255,255,.025); }
.tm-input::placeholder { color: #71879a; }
.tm-section-header { border-bottom-color: rgba(155,212,238,.12) !important; }
.tm-header-tabs { gap: 5px; }
.tm-header-tab { border-radius: 9px 9px 0 0; }
.tm-header-tab.tab-active { text-shadow: 0 0 16px rgba(59,215,255,.28); }
.tm-main-form-group { animation: tgrom-rise .45s ease both; }
.tm-main-form-group:nth-child(2) { animation-delay: .04s; }
.tm-main-form-group:nth-child(3) { animation-delay: .08s; }
.tm-main-form-group:nth-child(4) { animation-delay: .12s; }
.tm-main, .tm-footer, .tm-header { animation: tgrom-surface-in .42s ease-out both; }
.tm-input, .form-control, .btn, .tm-currency-tab, .tm-form-radio-item { will-change: transform, box-shadow; }
.tm-value, .accent-color { color: #d8f6ff !important; }
.tm-status-avail, .tm-status-unavail { border-radius: 999px; }
.tm-footer { background: rgba(7, 12, 19, .82) !important; border-top: 1px solid rgba(120,205,255,.08); }
.tgrom-empty-state { color: #8fa4b6; text-align: center; padding: 30px 16px !important; font-size: 14px; }
.tgrom-empty-page { margin: 56px auto; max-width: 720px; border: 1px dashed rgba(143,164,182,.35); border-radius: 12px; }

@keyframes tgrom-pulse { 0%, 100% { filter: drop-shadow(0 0 0 rgba(59,185,239,0)); } 50% { filter: drop-shadow(0 0 10px rgba(59,185,239,.35)); } }
@keyframes tgrom-menu-in { from { opacity: 0; transform: translateY(-5px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes tgrom-popup-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes tgrom-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tgrom-orbit { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(5vw, -3vh, 0) scale(1.08); } }
@keyframes tgrom-surface-in { from { opacity: .01; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media (max-width: 640px) { body { background-size: 30px 30px, 30px 30px, auto, auto; } .tm-logo-text::after { font-size: 22px; letter-spacing: 2px; } .tm-main::before { width: 280px; left: calc(50% - 140px); } }