:root {
        --background: #0a0a0b;
        --sidebar: #0d0e10;
        --card: #0f1113;
        --input: #121317;
        --border: rgba(0, 0, 0, 0.2);
        --foreground: #e6e7e9;
        --muted: #c4c6c8;
        --subtle: #8a8c8e;
        --primary: #8bf505;
        --primary-foreground: #000;
        --sidebar-active: #12210a;
      }

      * { box-sizing: border-box; margin: 0; padding: 0; }
      html, body {
        width: 100%;
        min-height: 100%;
        background: var(--background);
        color: var(--foreground);
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      }

      .app {
        display: flex;
        width: 100%;
        height: 100vh;
        min-height: 100vh;
        overflow: hidden;
      }

      .preloader-overlay {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #050506;
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
        background-size: 40px 40px;
        overflow: hidden;
        transition: opacity 420ms ease, visibility 420ms ease;
      }

      .preloader-overlay.hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }

      .preloader-glow {
        position: absolute;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(139, 245, 5, 0.09) 0%, rgba(0, 0, 0, 0) 70%);
        animation: preGlow 2.6s ease-in-out infinite alternate;
      }

      .preloader-content {
        position: relative;
        z-index: 2;
        width: min(440px, calc(100vw - 48px));
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .preloader-system {
        position: absolute;
        left: 32px;
        bottom: 32px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 11px;
        color: #8a8c8e;
        opacity: 0.56;
        z-index: 3;
      }

      .preloader-footer {
        position: absolute;
        right: 32px;
        bottom: 32px;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 11px;
        color: #8a8c8e;
        text-transform: uppercase;
        letter-spacing: 1px;
        opacity: 0.56;
        z-index: 3;
      }

      .preloader-logo {
        position: relative;
        width: 84px;
        height: 84px;
        display: grid;
        place-items: center;
        margin-bottom: 28px;
      }

      .preloader-ring {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 1px dashed rgba(161, 161, 170, 0.45);
        animation: preSpin 4.8s linear infinite;
      }

      .preloader-ring-inner {
        position: absolute;
        inset: -12px;
        border-radius: 50%;
        border: 1px solid rgba(139, 245, 5, 0.7);
        border-left-color: transparent;
        border-right-color: transparent;
        animation: preSpinReverse 2.4s linear infinite;
      }

      .preloader-core {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        background: #8bf505;
        display: grid;
        place-items: center;
        box-shadow: 0 0 24px rgba(139, 245, 5, 0.45);
      }

      .preloader-core img {
        width: 22px;
        height: 22px;
        object-fit: contain;
      }

      .preloader-brand {
        font-size: 28px;
        line-height: 1.2;
        letter-spacing: 2px;
        text-transform: uppercase;
        font-weight: 700;
        color: #8bf505;
        margin-bottom: 10px;
        text-shadow: 0 0 22px rgba(139, 245, 5, 0.28);
      }

      .preloader-sub {
        font-size: 13px;
        color: #9ba0a8;
        margin-bottom: 26px;
      }

      .preloader-track {
        width: 100%;
        height: 5px;
        border-radius: 999px;
        background: #17191d;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.08);
      }

      .preloader-fill {
        height: 100%;
        width: 0%;
        border-radius: inherit;
        background: linear-gradient(90deg, #6ecb00 0%, #8bf505 58%, #b4ff4d 100%);
        box-shadow: 0 0 16px rgba(139, 245, 5, 0.6);
        transition: width 70ms linear;
      }

      .preloader-lines {
        margin-top: 16px;
        width: 100%;
        border: 1px solid #23262d;
        border-radius: 8px;
        background: rgba(18, 20, 24, 0.65);
        padding: 12px;
        display: grid;
        gap: 6px;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 12px;
      }

      .preloader-line {
        color: #8f949c;
        display: grid;
        grid-template-columns: 64px 1fr;
        align-items: center;
        gap: 10px;
        transition: color 240ms ease;
      }

      .preloader-status {
        color: #7f858d;
      }

      .preloader-line.done {
        color: #71d30b;
      }

      .preloader-line.done .preloader-status {
        color: #71d30b;
      }

      .preloader-percent {
        margin-top: 10px;
        align-self: flex-end;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        color: #8bf505;
        font-size: 18px;
        min-width: 50px;
        text-align: right;
      }

      .sidebar {
        width: 260px;
        background: var(--sidebar);
        border-right: 1px solid var(--border);
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
      }

      .brand {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 24px;
      }

      .brand-icon {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background: var(--primary);
        display: grid;
        place-items: center;
      }

      .brand-icon img {
        width: 22px;
        height: 22px;
        object-fit: contain;
        display: block;
      }

      .brand-title {
        font-size: 20px;
        font-weight: 700;
        line-height: 30px;
        letter-spacing: 0;
      }

      .nav {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 0 16px;
        flex: 1;
      }

      .nav-item {
        height: 41px;
        border-radius: 8px;
        padding: 10px 12px;
        display: flex;
        align-items: center;
        gap: 12px;
        color: var(--muted);
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
        transition: background-color 160ms ease, color 160ms ease;
        cursor: pointer;
        position: relative;
        isolation: isolate;
      }

      .nav-item::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: radial-gradient(120px 26px at var(--mx, 50%) 50%, rgba(255,255,255,0.08), rgba(255,255,255,0));
        opacity: 0;
        transition: opacity 180ms ease;
        z-index: -1;
      }

      .nav-item img {
        width: 20px;
        height: 20px;
        object-fit: contain;
        display: block;
        flex-shrink: 0;
        filter: brightness(0) saturate(100%) invert(73%) sepia(7%) saturate(182%) hue-rotate(179deg) brightness(90%) contrast(90%);
        transition: filter 160ms ease;
      }

      .nav-item.active {
        background: #0f190a;
        color: var(--primary);
      }

      .nav-item.active::before {
        content: "";
        position: absolute;
        left: -1px;
        top: 8px;
        bottom: 8px;
        width: 2px;
        border-radius: 2px;
        background: #8bf505;
        box-shadow: 0 0 12px rgba(139,245,5,0.45);
      }

      .nav-item.active img {
        filter: brightness(0) saturate(100%) invert(89%) sepia(62%) saturate(3224%) hue-rotate(32deg) brightness(103%) contrast(96%);
      }

      .nav-item.active:hover {
        background: #0f190a;
        color: var(--primary);
      }

      .nav-item:not(.active):hover {
        background: #15171b;
        color: #e6e7e9;
      }

      .nav-item:hover::after {
        opacity: 1;
      }

      .nav-item:active {
        filter: brightness(1.08);
      }

      .sidebar-footer {
        border-top: 1px solid var(--border);
        padding: 25px 16px 24px;
        display: grid;
        gap: 12px;
      }

      .balance-card {
        height: 46px;
        border-radius: 8px;
        border: 1px solid var(--border);
        background: var(--card);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 13px;
      }

      .balance-label { font-size: 13px; font-weight: 500; color: var(--subtle); line-height: 19.5px; }
      .balance-value { font-size: 14px; font-weight: 600; line-height: 21px; }

      .profile {
        margin-top: 8px;
        display: flex;
        align-items: center;
        gap: 12px;
        border-radius: 8px;
        padding: 6px;
        transition: background-color 160ms ease;
        cursor: pointer;
      }

      .profile:hover { background: #13151a; }

      .avatar {
        width: 36px;
        height: 36px;
        border-radius: 999px;
        object-fit: cover;
      }

      .profile-name { font-size: 14px; font-weight: 600; line-height: 21px; }
      .profile-plan { font-size: 12px; line-height: 18px; color: var(--subtle); }
      .dots { margin-left: auto; color: #6b6e74; letter-spacing: 2px; }

      .main {
        flex: 1;
        min-width: 0;
        height: 100%;
        padding: 0;
        position: relative;
        isolation: isolate;
        overflow: hidden;
      }

      .main::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-image:
          linear-gradient(180deg, rgba(10, 10, 11, 0) 0%, rgba(10, 10, 11, 0.1) 42%, rgba(10, 10, 11, 0.92) 72%, rgba(10, 10, 11, 1) 100%),
          url("https://www.figma.com/api/mcp/asset/cb8785b7-88ce-402f-8d80-b25946fa5779");
        background-repeat: no-repeat, no-repeat;
        background-size: 100% 100%, 1700px 900px;
        background-position: center top, center top;
        opacity: 0.34;
      }

      .main > * {
        position: relative;
        z-index: 1;
      }

      .page-view {
        display: none;
        opacity: 0;
        pointer-events: none;
      }

      .page-view.active {
        display: block;
        height: 100%;
        overflow: auto;
        opacity: 1;
        pointer-events: auto;
        animation: pageIn 260ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .page-view.leaving {
        display: block;
        animation: pageOut 170ms ease forwards;
      }

      .header {
        height: 104px;
        padding: 32px 32px 32px 32px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .header-left {
        display: flex;
        align-items: center;
        gap: 20px;
      }

      .title {
        font-size: 34px;
        font-weight: 600;
        line-height: 36px;
        letter-spacing: -0.34px;
      }

      .create-btn {
        height: 32px;
        border-radius: 8px;
        border: none;
        background: var(--primary);
        color: var(--primary-foreground);
        width: 148px;
        padding: 0 12px;
        font-size: 13px;
        font-weight: 500;
        line-height: 19.5px;
        transition: transform 160ms ease, box-shadow 160ms ease;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }

      .create-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(139, 245, 5, 0.2);
      }

      .create-btn::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.28) 45%, transparent 70%);
        transform: translateX(-130%);
      }

      .create-btn:hover::after {
        animation: btnSweep 620ms ease;
      }

      .bell {
        width: 32px;
        height: 32px;
        border-radius: 999px;
        border: 1px solid #1a1c20;
        display: grid;
        place-items: center;
        cursor: pointer;
      }

      .bell img {
        width: 16px;
        height: 16px;
        object-fit: contain;
        display: block;
      }

      .tabs {
        margin-top: 0;
        display: flex;
        gap: 24px;
      }

      .tab {
        height: 33px;
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--subtle);
        font-size: 20px;
        font-weight: 500;
        line-height: 30px;
        border-bottom: 2px solid transparent;
        cursor: pointer;
        transition: color 140ms ease, border-color 140ms ease, opacity 140ms ease;
        user-select: none;
      }

      .tab.active {
        color: var(--primary);
        border-bottom-color: var(--primary);
      }

      .tab:not(.active):hover {
        color: #b1b4b9;
        border-bottom-color: #2a2d33;
      }

      .tab.active:hover {
        color: var(--primary);
        border-bottom-color: var(--primary);
        opacity: 0.95;
      }

      .tab:active {
        transform: translateY(1px);
      }

      .tab-icon {
        width: 16px;
        height: 16px;
        object-fit: contain;
        display: block;
        filter: brightness(0) saturate(100%) invert(53%) sepia(8%) saturate(173%) hue-rotate(178deg) brightness(93%) contrast(88%);
        transition: filter 140ms ease;
      }

      .tab.active .tab-icon {
        filter: brightness(0) saturate(100%) invert(88%) sepia(88%) saturate(6434%) hue-rotate(30deg) brightness(100%) contrast(92%);
      }

      .tab:not(.active):hover .tab-icon {
        filter: brightness(0) saturate(100%) invert(71%) sepia(6%) saturate(169%) hue-rotate(179deg) brightness(93%) contrast(86%);
      }

      .filters {
        margin-top: 24px;
        display: grid;
        grid-template-columns: 1.35fr 1.35fr 1.35fr 1.35fr;
        gap: 16px;
        position: relative;
        z-index: 5;
      }

      .filter, .filter-btn {
        height: 40px;
        border-radius: 8px;
        border: 1px solid #1f2126;
        background: var(--input);
        color: #707379;
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 12px;
      }

      .filter.search {
        justify-content: flex-start;
        gap: 8px;
      }

      .search-input {
        width: 100%;
        height: 100%;
        border: 0;
        background: transparent;
        color: #c4c6c8;
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
        outline: none;
      }

      .search-input::placeholder {
        color: #707379;
      }

      .filter-btn {
        width: 100%;
        cursor: pointer;
        transition: border-color 140ms ease, color 140ms ease;
      }

      .filter-btn:hover, .dropdown.open .filter-btn {
        border-color: #2b2e35;
        color: #b8bbc0;
      }

      .filter-left {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .filter-left img {
        width: 16px;
        height: 16px;
        object-fit: contain;
        display: block;
        filter: brightness(0) saturate(100%) invert(56%) sepia(8%) saturate(199%) hue-rotate(178deg) brightness(95%) contrast(88%);
      }

      .chev {
        width: 8px;
        height: 8px;
        border-right: 1.6px solid #6f737a;
        border-bottom: 1.6px solid #6f737a;
        transform: rotate(45deg);
        margin-top: -2px;
        transition: transform 140ms ease;
      }

      .dropdown.open .chev {
        transform: rotate(225deg);
        margin-top: 2px;
      }

      .dropdown { position: relative; z-index: 1; }
      .dropdown.open { z-index: 70; }

      .menu {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        background: #131418;
        border: 1px solid #23262d;
        border-radius: 8px;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
        padding: 6px;
        display: none;
        animation: fadeIn 120ms ease;
        z-index: 80;
      }

      .dropdown.open .menu { display: block; }

      .menu button {
        width: 100%;
        border: 0;
        background: transparent;
        color: #aaadb3;
        text-align: left;
        border-radius: 6px;
        height: 32px;
        padding: 0 10px;
        font-size: 13px;
        cursor: pointer;
      }

      .menu button:hover {
        background: #1a1d23;
        color: #e2e3e5;
      }

      .cards {
        margin-top: 24px;
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 20px;
      }

      .content-wrap {
        padding: 0 32px 24px;
      }

      .stats-wrap {
        padding: 22px 32px 24px;
      }

      .stats-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 22px;
      }

      .stats-head-left {
        display: flex;
        align-items: center;
        gap: 16px;
      }

      .stats-title {
        font-size: 40px;
        line-height: 48px;
        font-weight: 600;
        letter-spacing: -0.4px;
      }

      .date-btn {
        height: 40px;
        border-radius: 8px;
        border: 1px solid #1f2126;
        background: #111317;
        color: #d0d2d5;
        padding: 0 14px;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        font-size: 14px;
        transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
      }

      .date-btn:hover {
        border-color: #2a2d33;
        background: #15171b;
        transform: translateY(-1px);
      }

      .date-btn img {
        width: 16px;
        height: 16px;
        object-fit: contain;
        display: block;
      }

      .export-btn {
        height: 40px;
        border-radius: 8px;
        border: 0;
        background: #8bf505;
        color: #000;
        font-weight: 600;
        padding: 0 16px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        transition: transform 160ms ease, box-shadow 180ms ease;
      }

      .export-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(139, 245, 5, 0.24);
      }

      .export-btn img {
        width: 16px;
        height: 16px;
        object-fit: contain;
        display: block;
      }

      .stats-filters {
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 8px;
        background: #0d0f12;
        padding: 14px;
        overflow: visible;
        position: relative;
        z-index: 30;
      }

      .stats-filters-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        overflow: visible;
      }

      .stats-filter-cell {
        display: grid;
        gap: 8px;
        overflow: visible;
      }

      .stats-filter-label {
        font-size: 12px;
        color: #8a8c8e;
        line-height: 18px;
      }

      .stats-filter-row {
        margin-top: 16px;
        display: flex;
        justify-content: flex-end;
        gap: 12px;
      }

      .btn-reset {
        height: 40px;
        border-radius: 8px;
        border: 1px solid #ef4444;
        color: #ef4444;
        background: transparent;
        padding: 0 18px;
        cursor: pointer;
      }

      .btn-apply {
        height: 40px;
        border-radius: 8px;
        border: 0;
        background: #8bf505;
        color: #000;
        padding: 0 18px;
        cursor: pointer;
        font-weight: 600;
      }

      .stats-metrics {
        margin-top: 18px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        position: relative;
        z-index: 10;
      }

      .metric {
        border: 1px solid rgba(255,255,255,0.08);
        background: #0d0f12;
        border-radius: 12px;
        padding: 14px 16px;
        transition: border-color 170ms ease, transform 170ms ease;
      }

      .metric:hover {
        border-color: rgba(139,245,5,0.35);
        transform: translateY(-1px);
      }

      .metric-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .metric-name {
        color: #8a8c8e;
        font-size: 14px;
      }

      .metric-rate {
        font-size: 12px;
        border-radius: 4px;
        padding: 2px 6px;
        font-weight: 600;
      }

      .metric-rate.up {
        color: #1b6b00;
        background: rgba(34,197,94,0.1);
      }

      .metric-rate.down {
        color: #ef4444;
        background: rgba(239,68,68,0.1);
      }

      .metric-bottom {
        margin-top: 8px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
      }

      .metric-value {
        font-size: 46px;
        line-height: 46px;
        font-weight: 700;
      }

      .spark {
        width: 68px;
        height: 30px;
      }

      .spark img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        opacity: 0.95;
        transform-origin: right center;
        animation: sparkReveal 360ms ease both;
      }

      .metric:nth-child(1) .spark img { animation-delay: 20ms; }
      .metric:nth-child(2) .spark img { animation-delay: 50ms; }
      .metric:nth-child(3) .spark img { animation-delay: 80ms; }
      .metric:nth-child(4) .spark img { animation-delay: 110ms; }

      .stats-chart,
      .stats-filters,
      .stats-metrics {
        animation: riseIn 260ms ease both;
      }

      .stats-chart {
        margin-top: 18px;
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 12px;
        background: #0d0f12;
        padding: 18px;
        position: relative;
      }

      .chart-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .chart-title {
        font-size: 30px;
        font-weight: 600;
        line-height: 36px;
      }

      .segmented {
        border: 1px solid rgba(255,255,255,0.08);
        background: #050506;
        border-radius: 8px;
        padding: 5px;
        display: flex;
        gap: 0;
      }

      .segmented button {
        height: 27px;
        border: 0;
        border-radius: 4px;
        background: transparent;
        color: #8a8c8e;
        padding: 0 12px;
        cursor: pointer;
        font-size: 13px;
        line-height: 15px;
        font-weight: 400;
      }

      .segmented button.active {
        background: #8bf505;
        color: #000;
      }

      .chart-box {
        margin-top: 14px;
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 10px;
        height: 380px;
        position: relative;
        overflow: hidden;
        background:
          repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.07) 0,
            rgba(255,255,255,0.07) 1px,
            transparent 1px,
            transparent 76px
          );
      }

      .chart-plot {
        position: absolute;
        left: 50px;
        right: 16px;
        top: 24px;
        bottom: 44px;
      }

      .chart-svg {
        width: 100%;
        height: 100%;
        display: block;
      }

      .chart-area-path {
        fill: url(#chartGradient);
        opacity: 0.95;
        transition: opacity 180ms ease, transform 180ms ease;
      }

      .chart-line-path {
        fill: none;
        stroke: #8bf505;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: opacity 180ms ease, transform 180ms ease;
      }

      .chart-dots {
        transition: opacity 180ms ease, transform 180ms ease;
      }

      .chart-dots circle {
        fill: #8bf505;
        opacity: 0.92;
      }

      .stats-chart.switching .chart-line-path,
      .stats-chart.switching .chart-area-path,
      .stats-chart.switching .chart-dots {
        opacity: 0.2;
        transform: translateY(2px);
      }

      .stats-table {
        margin-top: 18px;
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 12px;
        background: #0d0f12;
        overflow: hidden;
        animation: riseIn 260ms ease both;
      }

      .stats-table-wrap {
        overflow-x: auto;
      }

      .stats-domain-table {
        width: 100%;
        min-width: 1120px;
        border-collapse: collapse;
      }

      .stats-domain-table thead th {
        text-align: left;
        font-size: 13px;
        font-weight: 600;
        color: #a2a6ad;
        background: #262a33;
        padding: 14px 12px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        position: sticky;
        top: 0;
        z-index: 2;
      }

      .stats-domain-table thead th:first-child {
        border-top-left-radius: 10px;
      }

      .stats-domain-table thead th:last-child {
        border-top-right-radius: 10px;
      }

      .stats-domain-table tbody td {
        padding: 11px 12px;
        font-size: 14px;
        line-height: 18px;
        color: #d5d9de;
        border-bottom: 1px solid rgba(255,255,255,0.04);
      }

      .stats-domain-table tbody tr:last-child td {
        border-bottom: 0;
      }

      .stats-domain-table tbody tr:hover td {
        background: #12151b;
      }

      .stats-domain-table tbody tr {
        transition: transform 170ms ease;
      }

      .stats-domain-table tbody tr:hover {
        transform: translateX(2px);
      }

      .domain-cell {
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .domain-chev {
        color: #7a8088;
        font-size: 11px;
        margin-top: 1px;
      }

      .ratio-cell {
        color: #c8ccd2;
        font-weight: 600;
      }

      .pixel-wrap {
        padding: 22px 32px 24px;
      }

      .pixel-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
      }

      .pixel-head {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .pixel-title {
        font-size: 36px;
        line-height: 40px;
        letter-spacing: -0.3px;
        font-weight: 600;
        margin-right: 6px;
      }

      .pixel-btn {
        height: 38px;
        border-radius: 8px;
        border: 1px solid transparent;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 0 14px;
        font-size: 15px;
        line-height: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: transform 150ms ease, box-shadow 180ms ease, border-color 180ms ease;
        position: relative;
        overflow: hidden;
      }

      .pixel-btn-icon {
        width: 14px;
        height: 14px;
        display: block;
        flex-shrink: 0;
      }

      .pixel-btn:hover {
        transform: translateY(-1px);
      }

      .pixel-btn::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.2) 48%, transparent 72%);
        transform: translateX(-130%);
      }

      .pixel-btn:hover::after {
        animation: btnSweep 560ms ease;
      }

      .pixel-btn.primary {
        background: #8bf505;
        color: #000;
      }

      .pixel-btn.primary:hover {
        box-shadow: 0 8px 18px rgba(139, 245, 5, 0.24);
      }

      .pixel-btn.ghost {
        background: transparent;
        border-color: #8bf505;
        color: #8bf505;
      }

      .pixel-btn.ghost:hover {
        background: rgba(139, 245, 5, 0.08);
      }

      .pixel-search {
        width: 258px;
        height: 38px;
        border-radius: 8px;
        border: 1px solid #13161b;
        background: #0d0f12;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 12px;
      }

      .pixel-search img {
        width: 14px;
        height: 14px;
        object-fit: contain;
        display: block;
        opacity: 0.65;
      }

      .pixel-search input {
        border: 0;
        outline: none;
        width: 100%;
        background: transparent;
        color: #a6aab0;
        font-size: 13px;
      }

      .pixel-search input::placeholder {
        color: #707379;
      }

      .pixel-filter-grid {
        margin-top: 18px;
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .pixel-panel {
        margin-top: 16px;
        border: 1px solid rgba(255,255,255,0.08);
        background: #0d0f12;
        border-radius: 10px;
        overflow: hidden;
        overflow-x: auto;
      }

      .pixel-table {
        width: 100%;
        border-collapse: collapse;
      }

      .pixel-table thead th {
        text-align: left;
        color: #7d828a;
        font-size: 12px;
        font-weight: 500;
        padding: 14px 14px;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        position: sticky;
        top: 0;
        z-index: 2;
        background: #0f1115;
      }

      .is-sortable {
        cursor: pointer;
        user-select: none;
      }

      .is-sortable::after {
        content: "↕";
        margin-left: 6px;
        font-size: 10px;
        color: #666c74;
      }

      .is-sortable.sort-asc::after {
        content: "↑";
        color: #8bf505;
      }

      .is-sortable.sort-desc::after {
        content: "↓";
        color: #8bf505;
      }

      .pixel-table tbody td {
        color: #d7dadf;
        font-size: 14px;
        line-height: 20px;
        padding: 14px 14px;
        border-bottom: 1px solid rgba(255,255,255,0.04);
        white-space: nowrap;
      }

      .pixel-table tbody tr {
        transition: transform 170ms ease, background-color 170ms ease;
      }

      .pixel-table tbody tr:hover td {
        background: #12151b;
      }

      .pixel-table tbody tr:hover {
        transform: translateX(2px);
      }

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

      .pixel-table .token-cell {
        max-width: 190px;
        color: #828891;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .pixel-table .comment-cell {
        max-width: 140px;
        color: #8c9199;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .status-badge {
        display: inline-flex;
        align-items: center;
        height: 24px;
        border-radius: 999px;
        padding: 0 10px;
        font-size: 12px;
        font-weight: 500;
      }

      .status-badge.active {
        color: #8bf505;
        background: rgba(139,245,5,0.14);
      }

      .status-badge.moderation {
        color: #eab308;
        background: rgba(234,179,8,0.14);
      }

      .status-badge.banned {
        color: #ef4444;
        background: rgba(239,68,68,0.14);
      }

      .row-action {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        border: 1px solid transparent;
        background: transparent;
        color: #858b94;
        cursor: pointer;
        display: grid;
        place-items: center;
        font-size: 14px;
      }

      .row-action:hover {
        border-color: #2b2e34;
        background: #13161b;
        color: #d3d6da;
      }

      .pixel-pagination {
        height: 56px;
        border-top: 1px solid rgba(255,255,255,0.06);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        color: #838991;
        font-size: 13px;
        line-height: 1;
      }

      .pixel-page-btn {
        width: 24px;
        height: 24px;
        border-radius: 7px;
        border: 0;
        background: transparent;
        color: #838991;
        cursor: pointer;
        font-size: 13px;
      }

      .pixel-page-btn.active {
        background: #8bf505;
        color: #000;
        font-weight: 600;
      }

      .pixel-page-more {
        color: #6f757d;
        letter-spacing: 0.4px;
      }

      .pixel-page-next {
        color: #7e848d;
      }

      .users-wrap {
        padding: 24px 32px 26px;
      }

      .users-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 22px;
      }

      .users-title {
        font-size: 24px;
        line-height: 30px;
        font-weight: 600;
        letter-spacing: -0.2px;
      }

      .users-actions {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .users-filters {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 16px;
      }

      .users-filters .filter.search {
        width: min(100%, 320px);
      }

      .users-filters .dropdown {
        min-width: 168px;
      }

      .users-bulk {
        border: 1px solid #27272a;
        background: rgba(9, 9, 11, 0.5);
        border-radius: 10px;
        min-height: 46px;
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 12px 16px;
        color: #a1a1aa;
        font-size: 14px;
        margin-bottom: 18px;
      }

      .users-bulk input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: #8bf505;
        cursor: pointer;
      }

      .check-box {
        width: 18px;
        height: 18px;
        border: 1px solid #3f3f46;
        border-radius: 4px;
        background: #0d0e10;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex: 0 0 auto;
      }

      .check-box.checked {
        border-color: #8bf505;
        background: #8bf505;
        color: #000;
      }

      .users-bulk .result-count {
        margin-left: auto;
        font-size: 13px;
        color: #8a8c8e;
      }

      .users-bulk .bulk-select {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border-left: 1px solid #27272a;
        padding-left: 16px;
        color: #8a8c8e;
      }

      .users-list {
        display: grid;
        gap: 16px;
      }

      .user-card {
        border: 1px solid #27272a;
        background: #09090b;
        border-radius: 12px;
        padding: 20px 24px;
        display: grid;
        gap: 14px;
      }

      .user-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
      }

      .user-main {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;
      }

      .user-check {
        width: 18px;
        height: 18px;
        accent-color: #8bf505;
        cursor: pointer;
      }

      .user-online {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #8bf505;
        box-shadow: 0 0 8px rgba(139, 245, 5, 0.45);
      }

      .user-online.offline {
        background: #8a8c8e;
        box-shadow: none;
      }

      .user-avatar {
        width: 32px;
        height: 32px;
        border-radius: 999px;
        object-fit: cover;
      }

      .user-name {
        font-size: 16px;
        font-weight: 500;
      }

      .user-badges {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
      }

      .role-pill {
        height: 28px;
        border-radius: 999px;
        border: 1px solid #27272a;
        background: #18181b;
        padding: 0 10px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: #fafafa;
      }

      .team-pill {
        height: 28px;
        border-radius: 999px;
        background: rgba(255,255,255,0.06);
        padding: 0 10px;
        display: inline-flex;
        align-items: center;
        font-size: 12px;
        color: #a1a1aa;
      }

      .user-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 16px 24px;
        font-size: 13px;
        color: #a1a1aa;
      }

      .user-rows {
        border-top: 1px solid #27272a;
        padding-top: 12px;
        display: grid;
        gap: 12px;
      }

      .user-row {
        display: grid;
        grid-template-columns: 80px 1fr;
        gap: 16px;
        align-items: start;
      }

      .user-row .k {
        color: #8a8c8e;
        font-size: 13px;
      }

      .user-row .v {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 16px;
        font-size: 13px;
      }

      .perm-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #e6e7e9;
      }

      .perm-chip .perm-icon {
        font-size: 12px;
        width: 14px;
        display: inline-flex;
        justify-content: center;
      }

      .perm-chip .perm-icon.yes {
        color: #8bf505;
      }

      .perm-chip .perm-icon.no {
        color: #8a8c8e;
      }

      .perm-chip.muted {
        color: #8a8c8e;
      }

      .team-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }

      .team-chip .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }

      .perm-ok {
        color: #8bf505;
      }

      .perm-no {
        color: #a1a1aa;
      }

      .user-actions-row {
        border-top: 1px solid #27272a;
        padding-top: 10px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .user-action-btn {
        height: 32px;
        border: 1px solid transparent;
        background: transparent;
        color: #a1a1aa;
        border-radius: 8px;
        padding: 0 10px;
        font-size: 13px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
      }

      .user-action-btn:hover {
        border-color: #27272a;
        background: #101216;
        color: #e6e7e9;
      }

      .user-action-btn svg {
        width: 14px;
        height: 14px;
        flex: 0 0 auto;
      }

      .users-pagination {
        margin-top: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
      }

      .users-pagination .pixel-page-btn {
        border: 1px solid #27272a;
        background: #0b0c0f;
        color: #8a8c8e;
      }

      .users-pagination .pixel-page-btn.active {
        background: rgba(139, 245, 5, 0.12);
        border-color: #8bf505;
        color: #8bf505;
      }

      .user-kebab {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        border: 0;
        background: transparent;
        color: #8a8c8e;
        cursor: pointer;
      }

      .user-modal-panel {
        width: 100%;
        max-width: 480px;
        max-height: calc(100vh - 48px);
        background: #09090b;
        border-radius: 12px;
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        animation: modalIn 220ms ease;
      }

      .user-modal-header {
        padding: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #27272a;
      }

      .user-modal-title {
        font-size: 18px;
        line-height: 24px;
        font-weight: 600;
        letter-spacing: -0.3px;
      }

      .user-modal-close {
        width: 32px;
        height: 32px;
        border: 0;
        background: transparent;
        color: #8a8c8e;
        border-radius: 8px;
        cursor: pointer;
        font-size: 24px;
        line-height: 1;
      }

      .user-modal-body {
        padding: 24px;
        display: grid;
        gap: 20px;
        overflow: auto;
      }

      .user-group {
        display: grid;
        gap: 8px;
      }

      .user-label {
        font-size: 13px;
        font-weight: 500;
        color: #a1a1aa;
      }

      .user-field {
        position: relative;
        height: 40px;
        width: 100%;
        border: 1px solid #27272a;
        border-radius: 10px;
        background: #0b0c0f;
        display: flex;
        align-items: center;
      }

      .user-control {
        width: 100%;
        height: 100%;
        border: 0;
        background: transparent;
        color: #fafafa;
        padding: 0 14px;
        font-size: 14px;
        outline: none;
        font-family: inherit;
      }

      .user-control::placeholder {
        color: #8a8c8e;
      }

      .user-control:focus {
        border-radius: 10px;
        box-shadow: inset 0 0 0 1px #8bf505;
      }

      .user-control.select {
        appearance: none;
        cursor: pointer;
        padding-right: 32px;
      }

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

      .user-field-icon {
        color: #8a8c8e;
        display: inline-flex;
        align-items: center;
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
      }

      .user-pass-toggle {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        border: 0;
        background: transparent;
        color: #8a8c8e;
        cursor: pointer;
        width: 22px;
        height: 22px;
      }

      .switch-block {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid #27272a;
        border-radius: 10px;
        background: #050506;
        padding: 16px;
      }

      .switch-info {
        display: grid;
        gap: 4px;
      }

      .switch-title {
        font-size: 14px;
        font-weight: 500;
        color: #fafafa;
      }

      .switch-desc {
        font-size: 12px;
        color: #a1a1aa;
      }

      .switch-pill {
        appearance: none;
        border: 0;
        outline: none;
        width: 44px;
        height: 24px;
        border-radius: 999px;
        background: #8bf505;
        padding: 2px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        cursor: pointer;
        transition: background-color 160ms ease;
      }

      .switch-pill.off {
        background: #2f343c;
        justify-content: flex-start;
      }

      .switch-pill i {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #000;
        transition: transform 160ms ease;
      }

      .switch-pill:focus-visible {
        box-shadow: 0 0 0 1px rgba(139, 245, 5, 0.45);
      }

      .user-modal-footer {
        padding: 24px;
        border-top: 1px solid #27272a;
        display: flex;
        justify-content: flex-end;
        gap: 12px;
      }

      .user-modal-btn {
        height: 40px;
        padding: 0 20px;
        border-radius: 10px;
        font-size: 14px;
        border: 1px solid #27272a;
        background: transparent;
        color: #fafafa;
        cursor: pointer;
      }

      .user-modal-btn.primary {
        background: #8bf505;
        border-color: #8bf505;
        color: #000;
      }

      .flows-wrap {
        padding: 22px 32px 24px;
        display: grid;
        gap: 14px;
      }

      .flows-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }

      .flows-title {
        font-size: 40px;
        line-height: 44px;
        font-weight: 600;
        letter-spacing: -0.4px;
      }

      .flows-filters {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 12px;
      }

      .flows-count {
        color: #a1a1aa;
        font-size: 14px;
      }

      .flows-panel {
        border: 1px solid rgba(255,255,255,0.08);
        background: #0d0f12;
        border-radius: 12px;
        overflow: hidden;
      }

      .flows-table-wrap {
        overflow: auto;
      }

      .flows-table {
        width: 100%;
        min-width: 1280px;
        border-collapse: collapse;
      }

      .flows-table th,
      .flows-table td {
        padding: 13px 14px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        text-align: left;
        font-size: 13px;
        white-space: nowrap;
      }

      .flows-table th {
        color: #8f949c;
        font-weight: 500;
      }

      .flows-table td {
        color: #e5e7eb;
      }

      .flow-app {
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .flow-app img {
        width: 24px;
        height: 24px;
        border-radius: 6px;
        object-fit: cover;
      }

      .flow-actions {
        display: inline-flex;
        gap: 8px;
      }

      .flow-icon-btn {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        border: 1px solid rgba(255,255,255,0.08);
        background: #101218;
        color: #9aa0a8;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }

      .flow-icon-btn:hover {
        border-color: rgba(139,245,5,0.45);
        color: #8bf505;
      }

      .flows-pagination {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 14px;
      }

      .flows-page-info {
        color: #8f949c;
        font-size: 13px;
      }

      .flows-pages {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .chart-y {
        position: absolute;
        left: 16px;
        top: 22px;
        bottom: 36px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: #8a8c8e;
        font-size: 12px;
      }

      .chart-x {
        position: absolute;
        left: 50px;
        right: 16px;
        bottom: 10px;
        display: flex;
        justify-content: space-between;
        color: #8a8c8e;
        font-size: 12px;
      }

      .details-modal {
        position: fixed;
        inset: 0;
        z-index: 120;
        display: none;
      }

      .details-modal.open {
        display: block;
      }

      body.modal-open {
        overflow: hidden;
      }

      .toast-stack {
        position: fixed;
        right: 16px;
        bottom: 16px;
        z-index: 10000;
        display: grid;
        gap: 10px;
      }

      .toast {
        min-width: 220px;
        max-width: 320px;
        border: 1px solid #2a2d33;
        background: #111317;
        color: #d5d9de;
        border-radius: 10px;
        padding: 10px 12px;
        font-size: 13px;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
        animation: toastIn 180ms ease;
      }

      .details-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.72);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px 24px;
      }

      .details-panel {
        width: 100%;
        max-width: 840px;
        max-height: calc(100vh - 120px);
        background: #09090b;
        border: 1px solid #27272a;
        border-radius: 12px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        animation: modalIn 220ms ease;
      }

      .details-header {
        padding: 24px 32px;
        border-bottom: 1px solid #27272a;
        display: flex;
        justify-content: space-between;
        gap: 16px;
        flex-shrink: 0;
      }

      .details-head-left {
        display: flex;
        gap: 20px;
      }

      .details-icon {
        width: 80px;
        height: 80px;
        border-radius: 10px;
        object-fit: cover;
        border: 1px solid #27272a;
      }

      .details-title {
        font-size: 24px;
        font-weight: 600;
        line-height: 1.2;
      }

      .details-package {
        display: inline-block;
        margin-top: 8px;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px;
        color: #a1a1aa;
        background: #18181b;
        border: 1px solid #27272a;
        border-radius: 8px;
        padding: 4px 8px;
      }

      .details-badges {
        margin-top: 8px;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }

      .pill {
        font-size: 11px;
        font-weight: 700;
        border-radius: 999px;
        padding: 4px 10px;
      }

      .pill.new { background: #22c55e; color: #fff; }
      .pill.pro { background: #ffbf6b; color: #201107; }
      .pill.hot { background: #ef4444; color: #fff; }
      .pill.trending { background: #8bf505; color: #000; }

      .details-head-actions {
        display: flex;
        gap: 10px;
        align-items: flex-start;
      }

      .btn-muted {
        background: transparent;
        border: 1px solid #27272a;
        color: #e6e7e9;
        border-radius: 8px;
        height: 40px;
        padding: 0 14px;
        font-size: 14px;
        cursor: pointer;
      }

      .btn-close {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        border: 1px solid transparent;
        background: transparent;
        color: #a1a1aa;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
      }

      .details-body {
        padding: 24px 32px;
        overflow: auto;
        display: grid;
        gap: 28px;
        min-height: 0;
      }

      .details-section {
        display: grid;
        gap: 12px;
      }

      .details-section h3 {
        font-size: 13px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: #a1a1aa;
        margin-bottom: 0;
      }

      .details-title-row {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .details-title-icon {
        width: 24px;
        height: 24px;
        border-radius: 8px;
        border: 1px solid #27272a;
        background: #101114;
        color: #8bf505;
        display: grid;
        place-items: center;
        font-size: 12px;
      }

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

      .info-card {
        border: 1px solid #27272a;
        background: #111317;
        border-radius: 12px;
        padding: 14px 16px;
        min-height: 84px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 6px;
      }

      .info-card .label {
        font-size: 12px;
        color: #8a8c8e;
      }

      .info-card .value {
        font-size: 14px;
        color: #e6e7e9;
        font-weight: 500;
      }

      .value.mono {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      }

      .mini-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .mini-tags span {
        border: 1px solid #2a2d33;
        border-radius: 12px;
        background: #1b1e24;
        padding: 2px 10px;
        font-size: 13px;
      }

      .buyer-list {
        border: 1px solid #27272a;
        border-radius: 12px;
        background: #111317;
        padding: 16px;
        display: grid;
        gap: 10px;
      }

      .buyer-row {
        display: grid;
        grid-template-columns: 120px 1fr auto;
        align-items: center;
        gap: 10px;
      }

      .buyer-row .k {
        font-size: 13px;
        color: #a1a1aa;
      }

      .fake-input {
        border: 1px solid #27272a;
        background: #0b0b0d;
        border-radius: 8px;
        padding: 10px 12px;
        font-size: 13px;
        color: #e6e7e9;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .copy-btn {
        height: 36px;
        border: 1px solid #2a2d33;
        background: transparent;
        color: #a1a1aa;
        border-radius: 8px;
        padding: 0 12px;
        font-size: 13px;
        cursor: pointer;
      }

      .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
      }

      .stat-card {
        border: 1px solid #27272a;
        background: #111317;
        border-radius: 12px;
        padding: 14px 16px;
      }

      .stat-card .label {
        font-size: 13px;
        color: #8a8c8e;
      }

      .stat-card .value {
        margin-top: 6px;
        font-size: 24px;
        font-weight: 600;
      }

      .details-footer {
        border-top: 1px solid #27272a;
        padding: 18px 32px;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
      }

      .cards.switching .card {
        animation: cardsSwitch 220ms ease;
      }

      .card {
        --rx: 0deg;
        --ry: 0deg;
        position: relative;
        border-radius: 12px;
        border: 1px solid var(--border);
        overflow: hidden;
        background: var(--card);
        aspect-ratio: 1 / 1;
        animation: cardIn 320ms ease both;
        cursor: pointer;
        transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(0);
        transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease, border-color 220ms ease;
      }

      .card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(220px 120px at var(--cx, 50%) var(--cy, 50%), rgba(255,255,255,0.16), rgba(255,255,255,0));
        opacity: 0;
        transition: opacity 220ms ease;
        pointer-events: none;
        z-index: 2;
      }

      .card:nth-child(1) { animation-delay: 20ms; }
      .card:nth-child(2) { animation-delay: 40ms; }
      .card:nth-child(3) { animation-delay: 60ms; }
      .card:nth-child(4) { animation-delay: 80ms; }
      .card:nth-child(5) { animation-delay: 100ms; }
      .card:nth-child(6) { animation-delay: 120ms; }

      .card-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transform: scale(1);
        transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .card:hover {
        border-color: rgba(139,245,5,0.25);
        box-shadow: 0 16px 40px rgba(0,0,0,0.46);
      }

      .card:hover::before {
        opacity: 1;
      }

      .card:hover .card-img { transform: scale(1.1); }

      .overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 44%, rgba(0, 0, 0, 0.95) 100%);
        padding: 12px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        z-index: 3;
      }

      .row-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
      }

      .card-hot {
        background: #ff9f0a;
        color: #000;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 700;
        line-height: 10px;
        padding: 4px 7px;
        height: 18px;
      }

      .card-new {
        background: #f43f5e;
        color: #fff;
        border-radius: 4px;
        font-size: 9px;
        font-weight: 700;
        line-height: 10px;
        padding: 3px 6px;
        height: 16px;
      }

      .mmp {
        height: 18px;
        border-radius: 4px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(2px);
        color: #fff;
        font-size: 10px;
        font-weight: 500;
        line-height: 10px;
        padding: 4px 7px;
        display: flex;
        align-items: center;
        gap: 4px;
      }

      .mmp img { width: 10px; height: 10px; object-fit: contain; }

      .name {
        font-size: 14px;
        font-weight: 600;
        line-height: 21px;
        color: #fff;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-4px); }
        to { opacity: 1; transform: translateY(0); }
      }

      @keyframes preSpin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }

      @keyframes preSpinReverse {
        from { transform: rotate(360deg); }
        to { transform: rotate(0deg); }
      }

      @keyframes preGlow {
        0% { transform: scale(0.95); opacity: 0.6; }
        100% { transform: scale(1.08); opacity: 1; }
      }

      @keyframes preFill {
        from { width: 0%; }
        to { width: 100%; }
      }

      @keyframes cardIn {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
      }

      @keyframes modalIn {
        from { opacity: 0; transform: translateY(8px) scale(0.99); }
        to { opacity: 1; transform: translateY(0) scale(1); }
      }

      @keyframes cardsSwitch {
        0% { opacity: 1; transform: translateY(0); }
        50% { opacity: 0.7; transform: translateY(2px); }
        100% { opacity: 1; transform: translateY(0); }
      }

      @keyframes sparkReveal {
        from { opacity: 0; transform: translateY(2px) scaleX(0.92); }
        to { opacity: 0.95; transform: translateY(0) scaleX(1); }
      }

      @keyframes riseIn {
        from { opacity: 0; transform: translateY(6px); }
        to { opacity: 1; transform: translateY(0); }
      }

      @keyframes pageIn {
        from { opacity: 0; }
        to { opacity: 1; }
      }

      @keyframes pageOut {
        from { opacity: 1; }
        to { opacity: 0; }
      }

      @keyframes btnSweep {
        from { transform: translateX(-130%); }
        to { transform: translateX(130%); }
      }

      @keyframes toastIn {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
      }

      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
          animation: none !important;
          transition: none !important;
        }
      }

      @media (max-width: 1420px) { .cards { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

      @media (max-width: 1200px) {
        .app {
          flex-direction: column;
          height: auto;
          overflow: visible;
        }
        .sidebar { width: 100%; }
        .main {
          height: auto;
          overflow: visible;
        }
        .page-view.active {
          height: auto;
          overflow: visible;
        }
        .sidebar-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .profile { grid-column: 1 / -1; }
        .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .flows-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .stats-filters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .stats-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .pixel-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .stats-header { flex-direction: column; align-items: flex-start; gap: 12px; }
        .pixel-top { flex-direction: column; align-items: flex-start; }
        .pixel-search { width: 100%; max-width: 420px; }
      }

      @media (max-width: 760px) {
        .main::before {
          background-size: 100% 100%, 1250px 700px;
          opacity: 0.24;
        }
        .content-wrap,
        .stats-wrap,
        .pixel-wrap { padding-left: 16px; padding-right: 16px; }
        .header { height: auto; align-items: flex-start; gap: 12px; flex-direction: column; }
        .title { font-size: 28px; line-height: 32px; }
        .stats-title,
        .pixel-title,
        .flows-title { font-size: 30px; line-height: 34px; }
        .users-title { font-size: 30px; line-height: 34px; }
        .tabs { gap: 16px; flex-wrap: wrap; }
        .tab { font-size: 18px; }
        .filters { grid-template-columns: 1fr; }
        .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .details-header { padding: 16px; flex-direction: column; }
        .details-body { padding: 16px; }
        .details-footer { padding: 14px 16px; flex-wrap: wrap; }
        .details-panel { max-width: 96vw; max-height: calc(100vh - 60px); }
        .details-grid { grid-template-columns: 1fr; }
        .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .buyer-row { grid-template-columns: 1fr; }
        .pixel-top { flex-direction: column; align-items: flex-start; }
        .pixel-head { flex-wrap: wrap; }
        .pixel-search { width: 100%; }
        .pixel-filter-grid { grid-template-columns: 1fr; }
        .flows-wrap { padding: 18px 14px 20px; }
        .flows-header { flex-direction: column; align-items: flex-start; }
        .flows-filters { grid-template-columns: 1fr; }
        .users-wrap { padding: 18px 14px 20px; }
        .users-header { flex-direction: column; align-items: flex-start; }
        .users-actions { width: 100%; }
        .users-actions .pixel-btn { flex: 1; justify-content: center; }
        .users-filters { grid-template-columns: 1fr; }
        .users-bulk { height: auto; min-height: 46px; flex-wrap: wrap; }
        .user-form-row { grid-template-columns: 1fr; }
        .user-modal-panel { max-width: 96vw; max-height: calc(100vh - 48px); }
        .user-modal-body,
        .user-modal-header,
        .user-modal-footer { padding: 16px; }
        .stats-domain-table { min-width: 980px; }
        .pixel-table { min-width: 980px; }
        .preloader-content { width: min(420px, calc(100vw - 28px)); }
        .preloader-brand { font-size: 22px; letter-spacing: 1.6px; }
        .preloader-sub { font-size: 12px; margin-bottom: 18px; }
        .preloader-lines { padding: 10px; font-size: 11px; }
        .preloader-system,
        .preloader-footer {
          left: 16px;
          right: auto;
          bottom: 12px;
          font-size: 10px;
        }
        .preloader-footer {
          left: auto;
          right: 16px;
          text-align: right;
          max-width: 42vw;
        }
      }

      @media (max-width: 560px) {
        .cards { grid-template-columns: 1fr; }
        .stats-metrics { grid-template-columns: 1fr; }
        .stats-grid { grid-template-columns: 1fr; }
        .create-btn { width: auto; }
        .pixel-btn { height: 36px; font-size: 14px; }
        .users-actions { flex-direction: column; }
        .users-actions .pixel-btn { width: 100%; }
        .date-btn,
        .export-btn,
        .btn-reset,
        .btn-apply { height: 36px; font-size: 13px; }
        .preloader-system { display: none; }
        .preloader-footer { right: 12px; left: 12px; max-width: none; text-align: center; }
        .toast-stack { left: 12px; right: 12px; bottom: 12px; }
        .toast { max-width: none; }
      }