:root {
      --hq-bg:#06150e;
      --hq-bg-soft:#0b2116;
      --hq-panel:#102d1c;
      --hq-line:rgba(157,255,70,.22);
      --hq-lime:#c9ff42;
      --hq-text:#f4f9ec;
      --hq-muted:#a6b8a5;
      --hq-shadow:0 20px 55px rgba(0,0,0,.28);
    }
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body.body{margin:0;background:var(--hq-bg);color:var(--hq-text);font-family:'DM Sans',sans-serif}
    body.body a{text-decoration:none}
    .hq-header-shell{width:min(1180px,calc(100% - 40px));margin:0 auto}
    .hq-site-header{position:relative;z-index:100;background:rgba(6,21,14,.88);border-bottom:1px solid rgba(201,255,66,.12);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
    .hq-public-header{position:sticky;top:0}
    .hq-header-row{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}
    .hq-header-brand{display:inline-flex;align-items:center;gap:11px;min-width:max-content;color:var(--hq-text);font:700 21px/1 'Space Grotesk',sans-serif;letter-spacing:-.04em}
    .hq-header-brand img{display:block;max-width:190px;max-height:48px;width:auto;height:auto;object-fit:contain}
    .hq-brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--hq-lime);color:#10240e;box-shadow:0 0 28px rgba(201,255,66,.3);font-weight:800}
    .hq-brand-name strong{color:var(--hq-lime)}
    .hq-nav-links{display:flex;align-items:center;justify-content:center;gap:24px;margin:0;padding:0;list-style:none}
    .hq-nav-link{display:inline-flex;align-items:center;gap:7px;padding:10px 0;color:var(--hq-muted);font-size:14px;font-weight:600;transition:.2s}
    .hq-nav-link:hover,.hq-nav-link.is-active{color:var(--hq-lime)}
    .hq-nav-actions{display:flex;align-items:center;gap:9px;min-width:max-content}
    .hq-header-btn{display:inline-flex;align-items:center;justify-content:center;min-height:41px;padding:10px 18px;border:1px solid var(--hq-line);border-radius:999px;color:var(--hq-text);font-size:13px;font-weight:700;transition:.2s ease}
    .hq-header-btn:hover{transform:translateY(-2px);border-color:var(--hq-lime)}
    .hq-header-btn-primary{border-color:var(--hq-lime);background:var(--hq-lime);color:#12210d;box-shadow:0 9px 24px rgba(201,255,66,.14)}
    .hq-header-btn-primary:hover{background:#dcff78;color:#12210d}
    .hq-mobile-toggle,.hq-private-toggle{display:none;place-items:center;width:42px;height:42px;padding:0;border:1px solid var(--hq-line);border-radius:12px;background:rgba(255,255,255,.03);color:var(--hq-text);cursor:pointer}
    .hq-burger{position:relative;width:19px;height:14px;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
    .hq-burger::after{content:'';position:absolute;left:0;top:5px;width:100%;border-top:2px solid currentColor}

    /* Private dashboard header */
    body.body-internal{min-height:100vh;padding-left:268px;background:radial-gradient(circle at 90% 0,rgba(157,255,70,.08),transparent 30rem),#06150e}
    .hq-private-header{position:sticky;top:0;margin-left:-268px;padding-left:268px}
    .hq-private-header .hq-header-row{width:100%;padding:0 24px}
    .hq-private-title{display:flex;align-items:center;gap:10px;color:var(--hq-muted);font-size:13px}
    .hq-live-dot{width:7px;height:7px;border-radius:50%;background:var(--hq-lime);box-shadow:0 0 12px var(--hq-lime)}
    .hq-private-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-left:auto}
    .hq-top-pill{display:flex;align-items:center;gap:9px;min-height:40px;padding:8px 14px;border:1px solid var(--hq-line);border-radius:999px;background:rgba(201,255,66,.035);color:var(--hq-text);font:700 13px/1 'DM Sans',sans-serif;white-space:nowrap}
    .hq-top-pill svg{width:17px;height:17px;flex:0 0 17px;color:var(--hq-lime)}
    .hq-date-pill{color:var(--hq-lime);padding-inline:17px}
    .hq-telegram-button{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid rgba(201,255,66,.28);border-radius:50%;background:rgba(201,255,66,.09);color:var(--hq-text);transition:.2s}
    .hq-telegram-button svg{width:21px;height:21px;fill:currentColor;transform:translate(-1px,1px)}
    .hq-telegram-button:hover{color:var(--hq-lime);border-color:var(--hq-lime);transform:translateY(-2px)}
    .hq-balance,.hq-user-menu{position:relative}
    .hq-balance-button{display:flex;align-items:center;gap:8px;min-height:40px;padding:8px 13px;border:1px solid var(--hq-line);border-radius:999px;background:rgba(201,255,66,.055);color:var(--hq-text);cursor:pointer;font:700 13px 'DM Sans',sans-serif;white-space:nowrap}
    .hq-currency-code{color:var(--hq-text);font-size:11px;letter-spacing:.04em}
    .hq-balance-value{color:var(--hq-text);font-size:12px}
    .hq-dropdown-chevron{width:15px;height:15px;color:var(--hq-muted);transition:transform .2s}
    .hq-dropdown.is-open .hq-dropdown-chevron{transform:rotate(180deg)}

    /* Dynamic currency list: {{ currencies_dropdown }} generates li/a elements */
    .hq-private-header .dropdown-menu{display:none;position:absolute;z-index:1000;top:calc(100% + 7px);right:0;left:auto;float:none;min-width:190px;max-height:300px;margin:0!important;padding:7px!important;overflow-y:auto;list-style:none;border:1px solid rgba(201,255,66,.2)!important;border-radius:13px!important;background:#102d1c!important;box-shadow:0 18px 48px rgba(0,0,0,.34)!important;color:var(--hq-text)}
    .hq-private-header .hq-dropdown.is-open>.dropdown-menu,.hq-private-header .dropdown-menu.show{display:block!important}
    .hq-private-header .balance-dropdown__container{width:190px}
    .hq-private-header .balance-dropdown__item{display:block;width:100%;margin:0!important;padding:0!important;border:0!important;list-style:none!important;background:transparent!important}
    .hq-private-header .balance-dropdown__link,.hq-private-header .currencies-item{display:flex!important;align-items:center!important;width:100%!important;min-height:40px;padding:10px 11px!important;border:0!important;border-radius:9px!important;background:transparent!important;color:#dce8d9!important;font:700 13px/1.35 'DM Sans',sans-serif!important;text-decoration:none!important;transition:.18s ease}
    .hq-private-header .balance-dropdown__link:hover,.hq-private-header .balance-dropdown__link:focus,.hq-private-header .currencies-item:hover{background:rgba(201,255,66,.11)!important;color:var(--hq-lime)!important;outline:0}
    .hq-private-header .balance-dropdown__item+ .balance-dropdown__item{margin-top:2px!important}
    .hq-private-header .dropdown-menu::-webkit-scrollbar{width:7px}
    .hq-private-header .dropdown-menu::-webkit-scrollbar-track{background:rgba(255,255,255,.03);border-radius:10px}
    .hq-private-header .dropdown-menu::-webkit-scrollbar-thumb{background:rgba(201,255,66,.28);border-radius:10px}

    .hq-user-button{display:flex;align-items:center;gap:9px;min-height:42px;padding:5px 11px 5px 6px;border:1px solid var(--hq-line);border-radius:999px;background:rgba(201,255,66,.045);color:var(--hq-text);cursor:pointer;font:700 13px 'DM Sans',sans-serif}
    .hq-user-avatar{display:grid;place-items:center;width:31px;height:31px;overflow:hidden;border:1px solid rgba(201,255,66,.35);border-radius:50%;background:linear-gradient(145deg,#2f6a3e,#173721);color:var(--hq-lime);font-weight:800;text-transform:uppercase}
    .hq-user-avatar img{width:100%;height:100%;object-fit:cover}
    .hq-user-name{max-width:125px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .hq-account-menu{width:190px;max-height:none!important;padding:8px!important}
    .hq-account-label{padding:8px 11px 7px;color:var(--hq-lime);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
    .hq-account-link{display:flex;align-items:center;gap:10px;min-height:40px;padding:9px 10px;border-radius:9px;color:var(--hq-text);font-size:13px;font-weight:700;transition:.18s}
    .hq-account-link svg{width:17px;height:17px;color:var(--hq-lime)}
    .hq-account-link:hover{background:rgba(201,255,66,.1);color:var(--hq-lime)}
    .hq-account-link.hq-logout-link{margin-top:4px;border-top:1px solid rgba(201,255,66,.12);border-radius:0 0 9px 9px;color:#ffb2a9}
    .hq-account-link.hq-logout-link svg{color:#ff8f82}
    .hq-private-sidebar{position:fixed;z-index:110;top:0;bottom:0;left:0;width:268px;display:flex;flex-direction:column;padding:20px 14px;border-right:1px solid rgba(201,255,66,.13);background:linear-gradient(180deg,#0b2116,#07170f);box-shadow:12px 0 42px rgba(0,0,0,.14);overflow-y:auto}
    .hq-private-sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 255, 66, 0.3) transparent;
}
    .hq-sidebar-brand{padding:7px 9px 17px}
    .hq-sidebar-profile{display:grid;justify-items:center;margin:0 4px 16px;padding:15px 12px 13px;border:1px solid rgba(201,255,66,.19);border-radius:16px;background:linear-gradient(145deg,rgba(22,59,34,.88),rgba(10,34,19,.9));box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
    .hq-sidebar-avatar{display:grid;place-items:center;width:56px;height:56px;margin-bottom:9px;overflow:hidden;border:1px solid rgba(201,255,66,.5);border-radius:50%;background:linear-gradient(145deg,#2f6a3e,#173721);color:var(--hq-lime);font:800 20px 'Space Grotesk',sans-serif;text-transform:uppercase}
    .hq-sidebar-avatar img{width:100%;height:100%;object-fit:cover}
    .hq-sidebar-username{max-width:190px;overflow:hidden;color:var(--hq-text);font:700 15px 'Space Grotesk',sans-serif;text-overflow:ellipsis;white-space:nowrap}
    .hq-sidebar-balance{display:inline-flex;align-items:center;gap:7px;margin-top:8px;padding:5px 6px 5px 11px;border:1px solid rgba(201,255,66,.19);border-radius:999px;background:rgba(201,255,66,.1);color:var(--hq-lime);font-size:13px;font-weight:800}
    .hq-sidebar-addfunds{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--hq-lime);color:#17300f;transition:.18s}
    .hq-sidebar-addfunds svg{width:12px;height:12px}.hq-sidebar-addfunds:hover{transform:rotate(90deg);background:#dcff78}
    .hq-sidebar-label{padding:5px 9px 8px;color:#708676;font-size:9px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
    .hq-sidebar-groups{display:grid;gap:10px}
    .hq-sidebar-group{position:relative;border-radius:13px;background:rgba(8,31,17,.45)}
    .hq-sidebar-group-toggle{position:relative;display:flex;align-items:center;gap:11px;width:100%;min-height:45px;padding:10px 12px;border:1px solid rgba(201,255,66,.08);border-radius:12px;background:#102f1d;color:var(--hq-text);font:700 14px 'DM Sans',sans-serif;text-align:left;cursor:pointer;transition:.18s}
    .hq-sidebar-group-toggle:hover{border-color:rgba(201,255,66,.25);background:#133823}
    .hq-group-grid{display:grid;place-items:center;flex:0 0 22px;width:22px;height:22px;color:var(--hq-lime)}
    .hq-group-grid svg{width:15px;height:15px;fill:currentColor}
    .hq-group-chevron{width:16px;height:16px;margin-left:auto;color:var(--hq-muted);transition:transform .22s}
    .hq-sidebar-group.is-open .hq-group-chevron{transform:rotate(180deg)}

    .hq-group-ticket-badge{position:absolute;top:-7px;right:9px;z-index:3;display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--hq-lime);color:#12210d;font:800 11px/1 'Space Grotesk',sans-serif;box-shadow:0 5px 14px rgba(0,0,0,.28);white-space:nowrap}
    .hq-sidebar-group--support .hq-sidebar-group-toggle{padding-right:42px}
    .hq-sidebar-group--support .hq-group-chevron{margin-left:auto}
    .hq-sidebar-menu{display:none;gap:2px;margin:5px 0 0;padding:2px 5px 4px;list-style:none}
    .hq-sidebar-group.is-open .hq-sidebar-menu{display:grid}
    .hq-sidebar-link{display:flex;align-items:center;gap:10px;min-height:41px;padding:7px 10px;border:1px solid transparent;border-radius:10px;color:#d5dfd2;font-size:13px;font-weight:600;transition:.18s}
    .hq-sidebar-link:hover{background:rgba(201,255,66,.055);color:var(--hq-text)}
    .hq-sidebar-item.is-active .hq-sidebar-link{background:rgba(201,255,66,.07);color:var(--hq-lime)}
    .hq-sidebar-icon{display:grid;place-items:center;flex:0 0 25px;width:25px;height:25px;color:#e9f0e6;font-size:15px}
    .hq-sidebar-item.is-active .hq-sidebar-icon{color:var(--hq-lime)}
    .hq-sidebar-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .hq-ticket-badge{margin-left:auto;padding:2px 7px;border-radius:999px;background:var(--hq-lime);color:#12210d;font-size:10px;font-weight:800}
    .hq-sidebar-updates{margin-top:4px;padding-top:4px;}
    .hq-sidebar-updates .hq-sidebar-menu{display:grid;margin:0;padding:0}
    .hq-sidebar-updates .hq-sidebar-link{min-height:43px;background:#102f1d}
    .hq-sidebar-foot{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:auto;padding-top:18px}
    .hq-sidebar-foot a{padding:10px 8px;border:1px solid var(--hq-line);border-radius:11px;color:var(--hq-muted);text-align:center;font-size:12px;font-weight:700}
    .hq-sidebar-foot a:hover{color:var(--hq-lime);border-color:var(--hq-lime)}
    .hq-sidebar-overlay{display:none}

    @media(max-width:980px){
      .hq-nav-links{gap:15px}.hq-nav-link{font-size:13px}.hq-header-btn{padding-inline:14px}
      body.body-internal{padding-left:0}
      .hq-private-header{margin-left:0;padding-left:0}
      .hq-private-sidebar{transform:translateX(-105%);transition:transform .25s ease}
      body.hq-sidebar-open .hq-private-sidebar{transform:translateX(0)}
      .hq-private-toggle{display:grid}
      .hq-sidebar-overlay{position:fixed;z-index:105;inset:0;background:rgba(0,0,0,.55)}
      body.hq-sidebar-open .hq-sidebar-overlay{display:block}
    }
    @media(max-width:850px){
      .hq-header-row{min-height:70px}
      .hq-public-header .hq-nav-links{display:none;position:absolute;top:70px;left:14px;right:14px;align-items:stretch;padding:14px;border:1px solid var(--hq-line);border-radius:17px;background:#0b2116;box-shadow:var(--hq-shadow);flex-direction:column;gap:2px}
      .hq-public-header .hq-nav-links.hq-nav-open{display:flex}
      .hq-public-header .hq-nav-link{padding:11px 10px;border-radius:9px}
      .hq-public-header .hq-nav-link:hover{background:rgba(201,255,66,.06)}
      .hq-mobile-toggle{display:grid}
      .hq-public-header .hq-nav-actions .hq-header-btn:not(.hq-header-btn-primary){display:none}
    }
    .hq-date-mobile{display:none}
    @media(max-width:760px){
      .hq-date-pill{width:auto;min-width:0;padding:8px 10px;gap:6px;font-size:11px}
      .hq-date-desktop{display:none}
      .hq-date-mobile{display:inline}
      .hq-user-name{display:none}
      .hq-user-button{padding-right:7px}
    }
    @media(max-width:560px){
      .hq-header-shell{width:min(100% - 28px,1180px)}
      .hq-header-brand{font-size:18px}.hq-header-brand img{max-width:145px;max-height:40px}
      .hq-public-header .hq-header-btn-primary{padding:9px 12px;font-size:11px}
      .hq-private-title{display:none}.hq-private-header .hq-header-row{padding:0 10px}
      .hq-private-actions{gap:6px}
      .hq-telegram-button{display:none}
      .hq-balance-button{max-width:132px;padding-inline:10px}.hq-balance-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
      .hq-currency-code{display:none}
      .hq-private-header .balance-dropdown__container{right:-48px}
    }
    
    :root {
    --s4-bg: #041409;
    --s4-surface: #0f2416;
    --s4-raised: #173621;
    --s4-input: #091c10;
    --s4-text: #f4fae7;
    --s4-muted: #adbea5;
    --s4-line: #294b32;
    --s4-lime: #d5ff26;
    --s4-button: linear-gradient(118deg, #f4ff9d 0%, #deff50 27%, #b9f516 62%, #82d609 100%);
    --rp-blue: #d5ff26;
    --rp-blue-2: #bdeb16;
    --rp-cyan: #d4f871;
    --rp-navy: #0b1d10;
    --rp-bg: #041409;
    --rp-panel: #0f2416;
    --rp-line: #294b32;
    --rp-text: #f4fae7;
    --rp-muted: #adbea5;
}

.badge {
    background: var(--s4-raised) !important;
    color: var(--s4-lime) !important;
    border: 1px solid #507331 !important;
    min-width: 24px;
    padding: 3px 6px;
    border-radius: 6px;
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;

    
}



.select2-results__option[aria-selected="true"],
.select2-results__option[aria-selected="true"] > a {
  background: var(--s4-button) !important;
  color: #102006 !important;
}


    .img-responsive {
        max-width: 100%;
        max-width: calc(1em + 3px);
        max-height: calc(1em + 3px);
        min-width: 1em;
    }
    
.btn-group, .btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}


    .hq-private-toggle,
    .hq-mobile-toggle {
        flex: 0 0 auto;
        background: rgba(201, 255, 66, .07);
        border: 1px solid rgba(201, 255, 66, .35);
        -webkit-tap-highlight-color: transparent
    }

    @media(max-width:980px) {
        body.body-internal .hq-private-toggle {
            display: grid !important;
            place-items: center;
            visibility: visible !important;
            opacity: 1 !important
        }
    }

    @media(max-width:850px) {
        body.body-public .hq-mobile-toggle {
            display: grid !important;
            place-items: center;
            visibility: visible !important;
            opacity: 1 !important
        }
    }

    .hq-burger {
        display: block;
        width: 19px;
        height: 14px;
        border: 0 !important;
        position: relative
    }

    .hq-burger:before {
        content: '';
        position: absolute;
        left: 0;
        top: 1px;
        width: 100%;
        height: 2px;
        border-radius: 2px;
        background: #f4f9ec;
        box-shadow: 0 5.5px 0 #f4f9ec, 0 11px 0 #f4f9ec
    }

    .hq-burger:after {
        display: none !important
    }
  
  
  
  /*========neworders===============*/
  :root {
    --hqno-bg: #06150e;
    --hqno-soft: #0a1d13;
    --hqno-card: #0e2b1a;
    --hqno-card2: #0a2114;
    --hqno-line: rgba(201, 255, 66, .18);
    --hqno-line2: rgba(201, 255, 66, .48);
    --hqno-lime: #c9ff42;
    --hqno-text: #f4f9ec;
    --hqno-muted: #a6b8a5;
    --hqno-muted2: #708676;
    --hqno-shadow: 0 22px 60px rgba(0, 0, 0, .27)
}

.hqno-page,
.hqno-page * {
    box-sizing: border-box
}

.hqno-page {
    min-height: calc(100vh - 78px);
    padding: 28px clamp(14px, 2.4vw, 34px) 60px;
    overflow: hidden;
    color: var(--hqno-text);
    background: radial-gradient(circle at 8% 0, rgba(157, 255, 70, .09), transparent 28rem), radial-gradient(circle at 94% 20%, rgba(38, 149, 78, .09), transparent 30rem), linear-gradient(180deg, var(--hqno-bg), var(--hqno-soft) 50%, var(--hqno-bg));
    font-family: 'DM Sans', sans-serif
}

.hqno-container {
    width: 100%;
    max-width: 1440px;
    margin: auto
}

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

.hqno-stat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    min-height: 104px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid var(--hqno-line);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(20, 58, 33, .86), rgba(8, 27, 16, .9));
    transition: .2s
}

.hqno-stat:after {
    content: '';
    position: absolute;
    right: -34px;
    bottom: -50px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(201, 255, 66, .045)
}

.hqno-stat:hover {
    transform: translateY(-3px);
    border-color: var(--hqno-line2);
    box-shadow: var(--hqno-shadow)
}

.hqno-stat--balance {
    border-color: rgba(201, 255, 66, .38);
    background: linear-gradient(145deg, rgba(41, 82, 37, .92), rgba(12, 43, 23, .92))
}

.hqno-stat-icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(201, 255, 66, .22);
    border-radius: 14px;
    background: rgba(201, 255, 66, .08);
    color: var(--hqno-lime)
}

.hqno-stat-icon svg {
    width: 23px;
    height: 23px
}

.hqno-stat-copy {
    position: relative;
    z-index: 1;
    min-width: 0
}

.hqno-stat-label {
    display: block;
    margin-bottom: 6px;
    color: var(--hqno-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase
}

.hqno-stat-value {
    display: block;
    overflow: hidden;
    color: var(--hqno-text);
    font: 700 clamp(18px, 2vw, 25px)/1.1 'Space Grotesk', sans-serif;
    letter-spacing: -.035em;
    text-overflow: ellipsis;
    white-space: nowrap
}

.hqno-stat--balance .hqno-stat-value {
    color: var(--hqno-lime)
}

.hqno-addfunds {
    position: absolute;
    z-index: 2;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border: 1px solid rgba(201, 255, 66, .25);
    border-radius: 9px;
    background: rgba(201, 255, 66, .08);
    color: var(--hqno-lime)
}

.hqno-addfunds svg {
    width: 15px;
    height: 15px
}

.hqno-addfunds:hover {
    background: var(--hqno-lime);
    color: #12210d
}

.hqno-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(330px, .86fr);
    align-items: start;
    gap: 18px
}

.hqno-order-card,
.hqno-details {
    border: 1px solid var(--hqno-line);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(16, 49, 28, .92), rgba(7, 24, 14, .95));
    box-shadow: var(--hqno-shadow)
}

.hqno-order-card {
    padding: 20px
}

.hqno-card-head {
    margin-bottom: 18px
}

.hqno-card-head h1 {
    margin: 0 0 5px;
    color: var(--hqno-text);
    font: 700 27px/1.2 'Space Grotesk', sans-serif;
    letter-spacing: -.045em
}

.hqno-card-head p {
    margin: 0;
    color: var(--hqno-muted);
    font-size: 12px;
    line-height: 1.6
}

.hqno-platform-wrap {
    margin-bottom: 20px;
    padding: 13px;
    border: 1px solid rgba(201, 255, 66, .13);
    border-radius: 16px;
    background: rgba(4, 20, 11, .34)
}

#new-order-cats.hqno-platforms {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    width: 100%
}

.hqno-platform-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-width: 0;
    min-height: 47px;
    padding: 9px 11px;
    border: 1px solid rgba(201, 255, 66, .17);
    border-radius: 11px;
    background: rgba(17, 53, 29, .68);
    color: var(--hqno-text);
    font: 700 12px/1.2 'DM Sans', sans-serif;
    text-align: left;
    cursor: pointer;
    transition: .18s
}

.hqno-platform-btn:hover,
.hqno-platform-btn:focus {
    transform: translateY(-2px);
    border-color: rgba(201, 255, 66, .55);
    background: rgba(201, 255, 66, .1);
    color: var(--hqno-lime);
    outline: 0
}

.hqno-platform-btn.is-active {
    border-color: var(--hqno-lime);
    background: linear-gradient(135deg, var(--hqno-lime), #9aea28);
    color: #12210d;
    box-shadow: 0 9px 24px rgba(201, 255, 66, .15)
}

.hqno-platform-svg {
    display: grid;
    place-items: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px
}

.hqno-platform-svg svg {
    display: block;
    width: 22px;
    height: 22px
}

.hqno-platform-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.hqno-platform-btn[data-change-cat=facebook] .hqno-platform-svg {
    color: #1877f2
}

.hqno-platform-btn[data-change-cat=instagram] .hqno-platform-svg {
    color: #ef4c85
}

.hqno-platform-btn[data-change-cat=telegram] .hqno-platform-svg {
    color: #29a9e8
}

.hqno-platform-btn[data-change-cat=tiktok] .hqno-platform-svg {
    color: #ff416c
}

.hqno-platform-btn[data-change-cat=youtube] .hqno-platform-svg {
    color: #ff3030
}

.hqno-platform-btn[data-change-cat=twitch] .hqno-platform-svg {
    color: #9146ff
}

.hqno-platform-btn[data-change-cat=linkedin] .hqno-platform-svg {
    color: #0a66c2
}

.hqno-platform-btn[data-change-cat=whatsapp] .hqno-platform-svg {
    color: #31d366
}

.hqno-platform-btn[data-change-cat=spotify] .hqno-platform-svg {
    color: #1ed760
}

.hqno-platform-btn[data-change-cat=soundcloud] .hqno-platform-svg {
    color: #ff7300
}

.hqno-platform-btn[data-change-cat=traffic] .hqno-platform-svg {
    color: #ff9718
}

.hqno-platform-btn[data-change-cat=discord] .hqno-platform-svg {
    color: #6674f4
}

.hqno-platform-btn[data-change-cat=pinterest] .hqno-platform-svg {
    color: #e60023
}

.hqno-platform-btn[data-change-cat=snapchat] .hqno-platform-svg {
    color: #ffec24
}

.hqno-platform-btn[data-change-cat=kick] .hqno-platform-svg {
    color: #53fc18
}

.hqno-platform-btn.is-active .hqno-platform-svg {
    color: #12210d !important
}

.hqno-group {
    margin-bottom: 15px
}

.hqno-label,
#neworder_fields label {
    display: block;
    margin: 0 0 7px;
    color: #dce7d9;
    font-size: 12px;
    font-weight: 700
}

.hqno-input,
#neworder_fields input:not([type=checkbox]):not([type=radio]),
#neworder_fields textarea,
#neworder_fields select {
    display: block;
    width: 100%;
    min-height: 47px;
    padding: 11px 13px;
    border: 1px solid rgba(201, 255, 66, .18);
    border-radius: 11px;
    background: rgba(3, 18, 9, .5);
    color: var(--hqno-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
    outline: 0;
    font: 400 13px 'DM Sans', sans-serif;
    transition: .18s
}

#neworder_fields textarea {
    min-height: 105px;
    resize: vertical
}

.hqno-input:focus,
#neworder_fields input:focus,
#neworder_fields textarea:focus,
#neworder_fields select:focus {
    border-color: rgba(201, 255, 66, .68);
    box-shadow: 0 0 0 3px rgba(201, 255, 66, .075)
}

.hqno-input::placeholder,
#neworder_fields input::placeholder,
#neworder_fields textarea::placeholder {
    color: var(--hqno-muted2)
}

#charge {
    color: var(--hqno-lime);
    font-weight: 800
}

.hqno-search {
    position: relative
}

.hqno-search-btn {
    position: absolute;
    z-index: 3;
    top: 50%;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--hqno-muted);
    transform: translateY(-50%);
    cursor: pointer
}

.hqno-search-btn svg {
    width: 18px;
    height: 18px
}

.hqno-search-btn--left {
    left: 4px
}

.hqno-search-btn--right {
    right: 4px;
    display: none !important;
}

.hqno-search-btn:hover {
    color: var(--hqno-lime)
}

#unique-input {
    padding-left: 44px;
    padding-right: 44px
}

#unique-dropdown {
    position: absolute;
    z-index: 150;
    left: 0;
    right: 0;
    max-height: 320px;
    margin-top: 7px;
    overflow-y: auto;
    border: 1px solid var(--hqno-line);
    border-radius: 13px;
    background: #102d1c;
    box-shadow: var(--hqno-shadow);
    color: var(--hqno-text)
}

.hqno-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 49px;
    padding: 12px 18px;
    border: 1px solid var(--hqno-lime);
    border-radius: 11px;
    background: linear-gradient(135deg, var(--hqno-lime), #a6ef2e);
    color: #10200d;
    box-shadow: 0 12px 28px rgba(201, 255, 66, .16);
    font: 800 14px 'DM Sans', sans-serif;
    cursor: pointer;
    transition: .2s
}

.hqno-submit svg {
    width: 18px;
    height: 18px
}

.hqno-submit:hover {
    transform: translateY(-2px);
    background: #dcff78;
    box-shadow: 0 16px 34px rgba(201, 255, 66, .22)
}

.hqno-alert {
    position: relative;
    margin: 0 0 16px;
    padding: 13px 42px 13px 14px;
    border: 1px solid var(--hqno-line);
    border-radius: 12px;
    background: rgba(201, 255, 66, .06);
    color: var(--hqno-text);
    font-size: 12px;
    line-height: 1.65
}

.hqno-alert--error {
    border-color: rgba(255, 143, 130, .35);
    background: rgba(255, 143, 130, .08)
}

.hqno-alert--success {
    border-color: rgba(126, 245, 155, .35);
    background: rgba(126, 245, 155, .07)
}

.hqno-alert h3 {
    margin: 0 0 10px;
    color: #7ef59b;
    font-size: 16px
}

.hqno-alert-close {
    position: absolute;
    top: 8px;
    right: 10px;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer
}

.hqno-result {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px 14px
}



.hqno-group .select2-selection {
    display: flex !important;
    align-items: center !important;
    min-height: 47px !important;
    padding: 7px 40px 7px 13px !important;
    border: 1px solid rgba(201, 255, 66, .18) !important;
    border-radius: 11px !important;
    background: rgba(3, 18, 9, .5) !important;
    color: var(--hqno-text) !important;
    box-shadow: none !important
}

.hqno-group .select2-selection__rendered {
    width: 100%;
    padding: 0 !important;
    color: var(--hqno-text) !important;
    line-height: 1.4 !important;
    font-size: 13px
}

.hqno-group .select2-selection__arrow {
    top: 10px !important;
    right: 10px !important
}

.select2-container--open .select2-dropdown {
    overflow: hidden;
    border: 1px solid rgba(201, 255, 66, .25) !important;
    border-radius: 13px !important;
    background: #102d1c !important;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .35) !important;
    color: var(--hqno-text) !important
}

.select2-search--dropdown {
    padding: 9px !important;
    background: #0c2517
}

.select2-search__field {
    min-height: 42px;
    padding: 9px 12px !important;
    border: 1px solid var(--hqno-line) !important;
    border-radius: 9px !important;
    background: #071b10 !important;
    color: var(--hqno-text) !important;
    outline: 0
}



.select2-results__option {
    min-height: 40px;
    margin: 2px 0;
    padding: 9px 4px !important;
    border-radius: 9px;
    color: #dce8d9 !important;
    
    
}



/* =============== New order  =============== */

#neworder_fields .form-group,
#neworder_fields .mb-3,
#neworder_fields .fields {
    margin: 0 0 15px !important
}

#neworder_fields .form-control {
    width: 100% !important
}

.hqno-details-column {
    position: sticky;
    top: 98px;
    min-width: 0
}

.hqno-details {
    --hqno-accent: #c9ff42;
    position: relative;
    min-width: 0;
    overflow: hidden
}

.hqno-details:before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--hqno-accent) 18%, transparent), transparent 18rem);
    pointer-events: none
}

.hqno-details-head {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 19px;
    border-bottom: 1px solid var(--hqno-line);
    background: rgba(255, 255, 255, .018)
}

.hqno-service-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid var(--hqno-line);
    border-radius: 15px;
    background: rgba(201, 255, 66, .07);
    color: var(--hqno-accent)
}

.hqno-service-icon svg {
    width: 27px;
    height: 27px
}

.hqno-details-title {
    min-width: 0
}

.hqno-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--hqno-lime);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase
}

.hqno-details-title h2 {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--hqno-text);
    font: 700 17px/1.35 'Space Grotesk', sans-serif;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3
}

.hqno-service-id {
    align-self: start;
    padding: 6px 8px;
    border: 1px solid var(--hqno-line);
    border-radius: 8px;
    background: rgba(201, 255, 66, .07);
    color: var(--hqno-lime);
    font-size: 9px;
    font-weight: 800
}

.hqno-details-body {
    position: relative;
    z-index: 1;
    padding: 17px
}

.hqno-empty {
    display: grid;
    place-items: center;
    min-height: 270px;
    padding: 30px;
    text-align: center;
    color: var(--hqno-muted)
}

.hqno-empty-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 12px;
    border: 1px solid var(--hqno-line);
    border-radius: 16px;
    background: rgba(201, 255, 66, .07);
    color: var(--hqno-lime)
}

.hqno-empty-icon svg {
    width: 25px;
    height: 25px
}

.hqno-empty strong {
    color: var(--hqno-text);
    font: 700 16px 'Space Grotesk', sans-serif
}

.hqno-empty p {
    max-width: 260px;
    margin: 8px 0 0;
    font-size: 11px;
    line-height: 1.6
}

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

.hqno-meta-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 68px;
    padding: 11px;
    border: 1px solid var(--hqno-line);
    border-radius: 12px;
    background: rgba(5, 23, 12, .44)
}

.hqno-meta-card--wide {
    grid-column: 1/-1
}

.hqno-is-hidden {
    display: none !important
}

.hqno-meta-icon {
    display: grid;
    place-items: center;
    flex: 0 0 35px;
    width: 35px;
    height: 35px;
    border-radius: 10px;
    background: rgba(201, 255, 66, .08);
    color: var(--hqno-lime)
}

.hqno-meta-icon svg {
    width: 19px;
    height: 19px
}

.hqno-meta-copy {
    min-width: 0
}

.hqno-meta-copy small {
    display: block;
    margin-bottom: 3px;
    color: var(--hqno-muted2);
    font-size: 9px;
    text-transform: uppercase
}

.hqno-meta-copy strong {
    display: block;
    color: var(--hqno-text);
    font-size: 11px;
    line-height: 1.4;
    overflow-wrap: anywhere
}

.hqno-description {
    margin-top: 11px;
    padding: 14px;
    border: 1px solid var(--hqno-line);
    border-radius: 13px;
    background: rgba(4, 20, 10, .4)
}

.hqno-description-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px
}

.hqno-description-head span {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border-radius: 9px;
    background: rgba(201, 255, 66, .08);
    color: var(--hqno-lime)
}

.hqno-description-head svg {
    width: 17px;
    height: 17px
}

.hqno-description-head h3 {
    margin: 0;
    color: var(--hqno-lime);
    font-size: 12px
}

.hqno-description-content {
    max-height: 360px;
    padding-right: 5px;
    overflow-y: auto;
    color: #d1ded0;
    font-size: 11px;
    line-height: 1.75;
    overflow-wrap: anywhere
}

.hqno-source-hidden {
    display: none !important
}

@media(max-width:1180px) {
    #new-order-cats.hqno-platforms {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media(max-width:980px) {
    .hqno-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
    .hqno-layout {
        grid-template-columns: minmax(0, 1fr)
    }
    .hqno-details-column {
        position: static
    }
    .hqno-details {
        width: 100%
    }
}

@media(max-width:640px) {
    .hqno-page {
        padding: 16px 10px 42px
    }
    .hqno-stats {
        gap: 8px;
        margin-bottom: 13px
    }
    .hqno-stat {
        min-height: 88px;
        padding: 12px;
        gap: 9px;
        border-radius: 14px
    }
    .hqno-stat-icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        border-radius: 11px
    }
    .hqno-stat-icon svg {
        width: 19px;
        height: 19px
    }
    .hqno-stat-label {
        font-size: 8px
    }
    .hqno-stat-value {
        font-size: 15px
    }
    .hqno-addfunds {
        top: 8px;
        right: 8px;
        width: 25px;
        height: 25px
    }
    .hqno-layout {
        gap: 13px
    }
    .hqno-order-card {
        padding: 13px;
        border-radius: 16px
    }
    .hqno-card-head h1 {
        font-size: 22px
    }
    .hqno-platform-wrap {
        padding: 8px;
        border-radius: 13px
    }
    #new-order-cats.hqno-platforms {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px
    }
    .hqno-platform-btn {
        min-height: 44px;
        padding: 8px 9px;
        font-size: 11px
    }
    .hqno-platform-svg {
        flex-basis: 21px;
        width: 21px;
        height: 21px
    }
    .hqno-platform-svg svg {
        width: 20px;
        height: 20px
    }
    .hqno-details {
        border-radius: 16px
    }
    .hqno-details-head {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 10px;
        padding: 13px 52px 13px 13px
    }
    .hqno-service-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px
    }
    .hqno-service-icon svg {
        width: 23px;
        height: 23px
    }
    .hqno-details-title h2 {
        font-size: 14px;
        line-height: 1.35;
        -webkit-line-clamp: 4
    }
    .hqno-service-id {
        position: absolute;
        top: 12px;
        right: 10px
    }
    .hqno-details-body {
        padding: 12px
    }
    .hqno-empty {
        min-height: 190px;
        padding: 20px
    }
    .hqno-result {
        grid-template-columns: 1fr
    }
}

/* =========================================================
   HQ SMM PANEL тАФ DESCRIPTION PRESERVATION + MOBILE PLATFORMS
   ========================================================= */

/* Keep the service description exactly as entered:
   line breaks, blank lines, bullets and section spacing remain visible. */

.hqno-description-content {
    white-space: pre-wrap !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    max-height: none !important;
    overflow: visible !important;
    font-variant-ligatures: none;
    tab-size: 4;
}

/* Cleaner, more authentic platform-logo presentation. */

.hqno-platform-btn .hqno-platform-svg {
    position: relative;
    border-radius: 9px;
    transition: transform .18s ease, filter .18s ease;
}

.hqno-platform-btn:hover .hqno-platform-svg,
.hqno-platform-btn:focus .hqno-platform-svg {
    transform: scale(1.08);
    filter: drop-shadow(0 0 7px currentColor);
}

.hqno-platform-btn.is-active .hqno-platform-svg {
    filter: none;
}

/* Mobile: exactly 4 platform icons per row; names disappear. */

@media(max-width:640px) {
    #new-order-cats.hqno-platforms {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }
    .hqno-platform-btn {
        min-height: 50px !important;
        height: 50px !important;
        padding: 7px 4px !important;
        justify-content: center !important;
        gap: 0 !important;
        border-radius: 12px !important;
    }
    .hqno-platform-svg {
        flex: 0 0 30px !important;
        width: 30px !important;
        height: 30px !important;
        border-radius: 10px;
    }
    .hqno-platform-svg svg {
        width: 25px !important;
        height: 25px !important;
    }
    .hqno-platform-name {
        display: none !important;
    }
    .hqno-description-content {
        font-size: 11.5px !important;
        line-height: 1.72 !important;
        white-space: pre-wrap !important;
    }
}

@media(max-width:390px) {
    #new-order-cats.hqno-platforms {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    .hqno-platform-btn {
        min-height: 48px !important;
        height: 48px !important;
    }
    .hqno-platform-svg {
        flex-basis: 28px !important;
        width: 28px !important;
        height: 28px !important;
    }
    .hqno-platform-svg svg {
        width: 23px !important;
        height: 23px !important;
    }
}

@media(max-width:390px) {
    .hqno-stats {
        grid-template-columns: 1fr 1fr
    }
    .hqno-stat {
        display: block;
        min-height: 112px
    }
    .hqno-stat-icon {
        margin-bottom: 8px
    }
    #new-order-cats.hqno-platforms {
        grid-template-columns: 1fr 1fr
    }
    .hqno-platform-name {
        font-size: 10px
    }
    .hqno-meta {
        grid-template-columns: 1fr
    }
    .hqno-meta-card--wide {
        grid-column: auto
    }
}

/* =========================================================
   HQ SMM PANEL тАФ PREMIUM ALERT & ORDER CONFIRMATION DESIGN
   ========================================================= */

.hqno-alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 20px;
    padding: 16px 44px 16px 16px;
    border-radius: 16px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    animation: hqnoFadeIn 0.3s ease-out;
    transition: all 0.25s ease;
}

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

/* Error Alert */

.hqno-alert--error {
    border: 1px solid rgba(255, 99, 99, 0.32);
    background: linear-gradient(145deg, rgba(40, 12, 12, 0.9), rgba(22, 6, 6, 0.95));
    box-shadow: 0 14px 36px rgba(255, 60, 60, 0.12);
    color: #ffd8d8;
}

/* Success Alert */

.hqno-alert--success {
    border: 1px solid rgba(201, 255, 66, 0.35);
    background: linear-gradient(145deg, rgba(14, 43, 24, 0.92), rgba(6, 25, 13, 0.95));
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), 0 0 24px rgba(201, 255, 66, 0.08);
    color: var(--hqno-text);
}

/* Status Icon Badge */

.hqno-alert-badge {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 11px;
}

.hqno-alert--error .hqno-alert-badge {
    background: rgba(255, 99, 99, 0.15);
    border: 1px solid rgba(255, 99, 99, 0.3);
    color: #ff6e6e;
}

.hqno-alert--success .hqno-alert-badge {
    background: rgba(201, 255, 66, 0.12);
    border: 1px solid rgba(201, 255, 66, 0.3);
    color: var(--hqno-lime);
}

.hqno-alert-badge svg {
    width: 20px;
    height: 20px;
}

.hqno-alert-body {
    min-width: 0;
    flex: 1;
}

.hqno-alert-title {
    margin: 0 0 4px;
    font: 700 15px/1.3 'Space Grotesk', sans-serif;
    letter-spacing: -0.02em;
}

.hqno-alert--success .hqno-alert-title {
    color: var(--hqno-lime);
}

.hqno-alert--error .hqno-alert-title {
    color: #ff8585;
}

.hqno-alert-msg {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: #d1ded0;
}

/* Order Success Metadata Grid */

.hqno-result {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.hqno-result-item {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    border-radius: 9px;
    background: rgba(3, 18, 9, 0.45);
    border: 1px solid rgba(201, 255, 66, 0.1);
    min-width: 0;
}

.hqno-result-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hqno-muted2);
    margin-bottom: 2px;
}

.hqno-result-val {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--hqno-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hqno-result-item:has(.hqno-charge) .hqno-result-val {
    color: var(--hqno-lime);
    font-family: 'Space Grotesk', sans-serif;
}

/* Dismiss Button */

.hqno-alert-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--hqno-muted);
    cursor: pointer;
    transition: 0.18s;
}

.hqno-alert-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--hqno-text);
}

/* Responsive Rules */

@media (max-width: 768px) {
    .hqno-result {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .hqno-alert {
        padding: 13px 36px 13px 12px;
        gap: 11px;
        border-radius: 14px;
    }
    .hqno-alert-badge {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
    }
    .hqno-alert-badge svg {
        width: 17px;
        height: 17px;
    }
    .hqno-result {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .hqno-result-item {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 6px 9px;
    }
    .hqno-result-label {
        margin-bottom: 0;
    }
}



/* =========================================================
   SEARCH DROPDOWN тАФ POSITION FIX + FULL RESPONSIVE
   ========================================================= */

/* ЁЯФз MAIN FIX: dropdown ржпрзЗржи search box-ржПрж░ ржирж┐ржЪрзЗржЗ ржерж╛ржХрзЗ,
   ржкрзБрж░рзЛ ржкрзЗржЬ ржЬрзБржбрж╝рзЗ ржирж╛ ржЫржбрж╝рж╛ржпрж╝ */

.hqno-form .hqno-group {
    position: relative;
}

#unique-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 7px !important;
    max-height: 340px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 500 !important;
    padding: 8px;
    border-radius: 13px;
    scrollbar-width: thin;
    scrollbar-color: rgba(201, 255, 66, .35) transparent;
    background: linear-gradient(160deg, #10301d, #0a2013) !important;
    border: 1px solid rgba(201, 255, 66, .28) !important;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .45), 0 0 20px rgba(201, 255, 66, .05) !important;
}

#unique-dropdown::-webkit-scrollbar {
    width: 5px;
}

#unique-dropdown::-webkit-scrollbar-thumb {
    background: rgba(201, 255, 66, .3);
    border-radius: 10px;
}

#unique-dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* --- Service item --- */

#unique-dropdown .selectme {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    min-width: 0;
    list-style: none;
    margin: 3px 0;
    padding: 11px 12px;
    border: 1px solid rgba(201, 255, 66, .08);
    border-radius: 11px;
    background: rgba(5, 23, 12, .38);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
}

#unique-dropdown .selectme:hover {
    border-color: rgba(201, 255, 66, .5);
    background: rgba(201, 255, 66, .09);
}

/* --- ID badge --- */

#unique-dropdown .selectme .badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 24px;
    padding: 0 8px;
    margin: 1px 0 0 !important;
    border: 1px solid rgba(201, 255, 66, .3) !important;
    border-radius: 8px !important;
    background: rgba(201, 255, 66, .1) !important;
    color: var(--hqno-lime) !important;
    font: 800 10.5px/1 'Space Grotesk', sans-serif !important;
    transition: .16s;
}

#unique-dropdown .selectme:hover .badge {
    background: var(--hqno-lime) !important;
    border-color: var(--hqno-lime) !important;
    color: #12210d !important;
}

/* --- Service name --- */

#unique-dropdown .selectme a {
    display: block;
    flex: 1;
    min-width: 0;
    color: #dce7d9 !important;
    font-size: 12.5px !important;
    font-weight: 600;
    line-height: 1.6;
    text-decoration: none !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    transition: .16s;
}

#unique-dropdown .selectme:hover a {
    color: var(--hqno-text) !important;
}

/* --- Price --- */

#unique-dropdown .selectme a b {
    color: var(--hqno-lime);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
}

/* --- Search highlight --- */

#unique-dropdown .selectme .highlight {
    padding: 0 1px;
    border-radius: 3px;
    background: rgba(201, 255, 66, .3);
    color: #fff;
    font-weight: 700;
}

/* =============== TABLET =============== */

@media (max-width: 980px) {
    #unique-dropdown {
        max-height: 300px;
    }
}

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

@media (max-width: 640px) {
    #unique-dropdown {
        max-height: 260px;
        padding: 6px;
        border-radius: 11px;
    }
    #unique-dropdown .selectme {
        gap: 8px;
        margin: 2px 0;
        padding: 9px 10px;
        border-radius: 10px;
    }
    #unique-dropdown .selectme .badge {
        min-width: 30px;
        height: 21px;
        font-size: 9.5px !important;
    }
    #unique-dropdown .selectme a {
        font-size: 11.5px !important;
        line-height: 1.55;
    }
}

/* =============== SMALL MOBILE =============== */

@media (max-width: 390px) {
    #unique-dropdown {
        max-height: 230px;
    }
    #unique-dropdown .selectme {
        gap: 7px;
        padding: 8px 9px;
    }
    #unique-dropdown .selectme .badge {
        min-width: 26px;
        height: 19px;
        font-size: 9px !important;
        padding: 0 5px;
    }
    #unique-dropdown .selectme a {
        font-size: 11px !important;
    }
}

  
  
  
  
      /* ================= 2FA / CONFIRM EMAIL — hq2f- ================= */

    .hq2f-page {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 72vh;
        padding: 46px 16px 60px;
        font-family: 'DM Sans', sans-serif;
        overflow: hidden
    }

    /* ambient glows */
    .hq2f-page::before {
        content: '';
        position: absolute;
        top: -120px;
        left: 50%;
        width: 560px;
        height: 560px;
        transform: translateX(-50%);
        background: radial-gradient(circle, rgba(201, 255, 66, .1), transparent 65%);
        pointer-events: none
    }
    .hq2f-page::after {
        content: '';
        position: absolute;
        bottom: -180px;
        right: -120px;
        width: 420px;
        height: 420px;
        background: radial-gradient(circle, rgba(201, 255, 66, .06), transparent 65%);
        pointer-events: none
    }

    .hq2f-card {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 440px;
        padding: 38px 34px 34px;
        border: 1px solid rgba(201, 255, 66, .2);
        border-radius: 22px;
        background: linear-gradient(160deg, #10301d, #0a2013);
        box-shadow: 0 30px 70px rgba(0, 0, 0, .5), 0 0 30px rgba(201, 255, 66, .04);
        text-align: center
    }

    /* shield icon */
    .hq2f-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 66px;
        height: 66px;
        margin-bottom: 18px;
        border: 1px solid rgba(201, 255, 66, .35);
        border-radius: 20px;
        background: rgba(201, 255, 66, .08);
        box-shadow: 0 0 26px rgba(201, 255, 66, .18), inset 0 0 14px rgba(201, 255, 66, .06)
    }
    .hq2f-icon svg {
        width: 30px;
        height: 30px;
        stroke: #c9ff42
    }

    .hq2f-title {
        margin: 0 0 10px;
        color: #f4f9ec;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 22px;
        font-weight: 800;
        letter-spacing: .3px
    }

    .hq2f-desc {
        margin: 0 0 22px;
        color: #a6b8a5;
        font-size: 13px;
        line-height: 1.7
    }
    .hq2f-desc strong { color: #c9ff42; font-weight: 700 }

    /* alerts */
    .hq2f-alert {
        margin: 0 0 18px;
        padding: 11px 14px;
        border-radius: 11px;
        font-size: 12.5px;
        line-height: 1.55;
        text-align: left
    }
    .hq2f-alert.alert-danger {
        border: 1px solid rgba(255, 92, 92, .35);
        background: rgba(255, 92, 92, .1);
        color: #ffb3b3
    }
    .hq2f-alert.alert-success {
        border: 1px solid rgba(201, 255, 66, .4);
        background: rgba(201, 255, 66, .1);
        color: #dfff9e
    }

    /* form */
    .hq2f-group {
        margin-bottom: 20px;
        text-align: left
    }
    .hq2f-group label {
        display: block;
        margin-bottom: 9px;
        color: #a6b8a5;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase
    }

    .hq2f-input {
        width: 100%;
        min-height: 52px;
        padding: 12px 16px;
        border: 1px solid rgba(201, 255, 66, .22);
        border-radius: 13px;
        outline: none;
        background: #071b10;
        color: #f4f9ec;
        font-family: 'Space Grotesk', monospace;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 8px;
        text-align: center;
        transition: border-color .18s ease, box-shadow .18s ease
    }
    .hq2f-input::placeholder {
        color: rgba(166, 184, 165, .45);
        font-size: 13px;
        font-weight: 400;
        letter-spacing: 1px
    }
    .hq2f-input:focus {
        border-color: rgba(201, 255, 66, .65);
        box-shadow: 0 0 0 4px rgba(201, 255, 66, .08), 0 0 18px rgba(201, 255, 66, .1)
    }

    .hq2f-divider {
        height: 1px;
        margin: 4px 0 20px;
        border: 0;
        background: linear-gradient(90deg, transparent, rgba(201, 255, 66, .22), transparent)
    }

    /* verify button */
    .hq2f-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        width: 100%;
        min-height: 50px;
        padding: 13px 26px;
        border: none;
        border-radius: 12px;
        cursor: pointer;
        background: #c9ff42;
        color: #102006;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 14px;
        font-weight: 800;
        letter-spacing: .8px;
        text-transform: uppercase;
        box-shadow: 0 12px 32px rgba(201, 255, 66, .22);
        transition: transform .16s ease, box-shadow .16s ease, background .16s ease
    }
    .hq2f-btn svg {
        width: 17px;
        height: 17px;
        stroke: #102006
    }
    .hq2f-btn:hover {
        background: #d8ff70;
        box-shadow: 0 16px 40px rgba(201, 255, 66, .32);
        transform: translateY(-2px)
    }
    .hq2f-btn:active {
        transform: translateY(0)
    }

    .hq2f-note {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        margin: 20px 0 0;
        color: rgba(166, 184, 165, .75);
        font-size: 11.5px;
        line-height: 1.5
    }
    .hq2f-note svg {
        flex: none;
        width: 13px;
        height: 13px;
        stroke: #a6b8a5
    }

    /* card entrance */
    @keyframes hq2fIn {
        from { opacity: 0; transform: translateY(18px) }
        to   { opacity: 1; transform: translateY(0) }
    }
    .hq2f-card { animation: hq2fIn .45s ease both }

    /* ---------- responsive ---------- */
    @media (max-width: 640px) {
        .hq2f-page { min-height: 66vh; padding: 30px 14px 46px }
        .hq2f-card { padding: 30px 22px 26px; border-radius: 18px }
        .hq2f-icon { width: 58px; height: 58px; border-radius: 17px; margin-bottom: 14px }
        .hq2f-icon svg { width: 26px; height: 26px }
        .hq2f-title { font-size: 19px }
        .hq2f-desc { font-size: 12.5px; margin-bottom: 18px }
        .hq2f-input { min-height: 48px; font-size: 16px; letter-spacing: 6px }
        .hq2f-btn { min-height: 47px; font-size: 13px }
    }
    @media (max-width: 390px) {
        .hq2f-card { padding: 26px 18px 22px }
        .hq2f-title { font-size: 18px }
        .hq2f-input { letter-spacing: 5px }
    }

  
  
  
  
  
  :root {
    --hqac-bg: #06150e;
    --hqac-soft: #0a1d13;
    --hqac-card: #0e2b1a;
    --hqac-line: rgba(201, 255, 66, .18);
    --hqac-line2: rgba(201, 255, 66, .48);
    --hqac-lime: #c9ff42;
    --hqac-text: #f4f9ec;
    --hqac-muted: #a6b8a5;
    --hqac-muted2: #708676;
    --hqac-shadow: 0 22px 60px rgba(0, 0, 0, .27)
}

.hqac-page,
.hqac-page * {
    box-sizing: border-box
}

.hqac-page {
    min-height: calc(100vh - 78px);
    padding: 28px clamp(14px, 2.4vw, 34px) 60px;
    overflow: hidden;
    color: var(--hqac-text);
    background: radial-gradient(circle at 8% 0, rgba(157, 255, 70, .09), transparent 28rem), radial-gradient(circle at 94% 20%, rgba(38, 149, 78, .09), transparent 30rem), linear-gradient(180deg, var(--hqac-bg), var(--hqac-soft) 50%, var(--hqac-bg));
    font-family: 'DM Sans', sans-serif
}

.hqac-page ::selection {
    background: rgba(201, 255, 66, .25)
}

.hqac-container {
    width: 100%;
    max-width: 1100px;
    margin: auto
}

/* ================= PROFILE HERO ================= */

.hqac-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 17px;
    margin-bottom: 20px;
    padding: 20px;
    overflow: hidden;
    border: 1px solid var(--hqac-line);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(16, 49, 28, .92), rgba(7, 24, 14, .95));
    box-shadow: var(--hqac-shadow)
}

.hqac-hero:after {
    content: '';
    position: absolute;
    right: -40px;
    top: -70px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: rgba(201, 255, 66, .05);
    pointer-events: none
}

.hqac-avatar {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    border: 2px solid rgba(201, 255, 66, .55);
    border-radius: 18px;
    background: linear-gradient(135deg, var(--hqac-lime), #9aea28);
    color: #12210d;
    box-shadow: 0 12px 28px rgba(201, 255, 66, .18);
    font: 800 25px 'Space Grotesk', sans-serif;
    text-transform: uppercase
}

.hqac-hero-copy {
    position: relative;
    z-index: 1;
    min-width: 0
}

.hqac-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--hqac-lime);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase
}

.hqac-hero-copy h1 {
    margin: 0 0 9px;
    color: var(--hqac-text);
    font: 700 clamp(21px, 2.4vw, 27px)/1.15 'Space Grotesk', sans-serif;
    letter-spacing: -.04em;
    overflow-wrap: anywhere
}

.hqac-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.hqac-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    min-height: 28px;
    padding: 5px 11px;
    border: 1px solid var(--hqac-line);
    border-radius: 999px;
    background: rgba(201, 255, 66, .05);
    color: var(--hqac-muted);
    font-size: 11px;
    font-weight: 700
}

.hqac-pill svg {
    flex: 0 0 13px;
    width: 13px;
    height: 13px;
    color: var(--hqac-lime)
}

.hqac-pill span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.hqac-pill--ok {
    border-color: rgba(126, 245, 155, .35);
    background: rgba(126, 245, 155, .07);
    color: #9ef0b4
}

.hqac-pill--ok svg {
    color: #7ef59b
}

.hqac-pill--warn {
    border-color: rgba(255, 193, 92, .4);
    background: rgba(255, 193, 92, .08);
    color: #ffd894
}

.hqac-pill--warn svg {
    color: #ffc15c
}

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

.hqac-page .alert {
    position: relative !important;
    margin: 0 0 16px !important;
    padding: 14px 44px 14px 14px !important;
    border-radius: 14px !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    animation: hqacFadeIn .3s ease-out
}

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

.hqac-page .alert-success {
    border: 1px solid rgba(201, 255, 66, .35) !important;
    background: linear-gradient(145deg, rgba(14, 43, 24, .95), rgba(6, 25, 13, .98)) !important;
    color: #d8ffb0 !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .3) !important
}

.hqac-page .alert-danger {
    border: 1px solid rgba(255, 99, 99, .32) !important;
    background: linear-gradient(145deg, rgba(40, 12, 12, .92), rgba(22, 6, 6, .96)) !important;
    color: #ffd8d8 !important;
    box-shadow: 0 14px 36px rgba(255, 60, 60, .12) !important
}

.hqac-page .alert-warning {
    border: 1px solid rgba(255, 193, 92, .4) !important;
    background: linear-gradient(145deg, rgba(46, 34, 8, .92), rgba(24, 17, 4, .96)) !important;
    color: #ffe3b0 !important
}

.hqac-page .alert-warning strong {
    color: #ffc15c
}

.hqac-page .alert .alert-link {
    color: var(--hqac-lime) !important;
    font-weight: 800;
    text-decoration: underline
}

.hqac-page .alert .close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    display: grid !important;
    place-items: center !important;
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, .05) !important;
    color: inherit !important;
    font-size: 14px !important;
    line-height: 1 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    cursor: pointer !important;
    transition: .18s
}

.hqac-page .alert .close:hover {
    background: rgba(255, 255, 255, .15) !important
}

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

.hqac-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px
}

.hqac-card {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--hqac-line);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(16, 49, 28, .92), rgba(7, 24, 14, .95));
    box-shadow: var(--hqac-shadow);
    transition: .2s
}

.hqac-card:hover {
    border-color: rgba(201, 255, 66, .3)
}

.hqac-card-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 15px
}

.hqac-head-icon {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--hqac-line);
    border-radius: 13px;
    background: rgba(201, 255, 66, .08);
    color: var(--hqac-lime)
}

.hqac-head-icon svg {
    width: 22px;
    height: 22px
}

.hqac-head-copy {
    min-width: 0
}

.hqac-head-copy h2 {
    margin: 0 0 3px;
    color: var(--hqac-text);
    font: 700 17px/1.25 'Space Grotesk', sans-serif;
    letter-spacing: -.03em
}

.hqac-head-copy p {
    margin: 0;
    color: var(--hqac-muted2);
    font-size: 11px;
    line-height: 1.55
}

/* ================= NOTE / INFO BOX ================= */

.hqac-note {
    display: flex;
    gap: 10px;
    margin: 0 0 15px;
    padding: 12px 13px;
    border: 1px solid rgba(201, 255, 66, .15);
    border-radius: 12px;
    background: rgba(201, 255, 66, .045);
    color: #d1ded0;
    font-size: 11.5px;
    line-height: 1.65
}

.hqac-note svg {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    color: var(--hqac-lime)
}

.hqac-note p {
    margin: 0
}

.hqac-note strong {
    color: var(--hqac-lime)
}

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

.hqac-page .form-group {
    margin: 0 0 14px
}

.hqac-page .control-label,
.hqac-page label {
    display: block;
    margin: 0 0 7px;
    color: #dce7d9;
    font-size: 12px;
    font-weight: 700
}

.hqac-page .form-control,
.hqac-modal .form-control {
    display: block;
    width: 100%;
    min-height: 47px;
    padding: 11px 13px;
    border: 1px solid rgba(201, 255, 66, .18);
    border-radius: 11px;
    background: rgba(3, 18, 9, .5);
    color: var(--hqac-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
    outline: 0;
    font: 400 13px 'DM Sans', sans-serif;
    transition: .18s
}

.hqac-page .form-control:focus,
.hqac-modal .form-control:focus {
    border-color: rgba(201, 255, 66, .68);
    box-shadow: 0 0 0 3px rgba(201, 255, 66, .075)
}

.hqac-page .form-control::placeholder,
.hqac-modal .form-control::placeholder {
    color: var(--hqac-muted2)
}

.hqac-page .form-control[readonly],
.hqac-modal .form-control[readonly] {
    border-style: dashed;
    background: rgba(201, 255, 66, .04);
    color: var(--hqac-muted);
    cursor: default
}

.hqac-page select.form-control,
.hqac-modal select.form-control {
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9ff42' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    appearance: none;
    -webkit-appearance: none
}

.hqac-page select.form-control option {
    background: #102d1c;
    color: var(--hqac-text)
}

.hqac-page #api_key {
    border-style: dashed !important;
    background: rgba(201, 255, 66, .05) !important;
    color: var(--hqac-lime) !important;
    font: 700 13px 'Space Grotesk', sans-serif;
    letter-spacing: .03em
}

.hqac-inline-row {
    display: flex;
    align-items: center;
    gap: 10px
}

.hqac-inline-row .form-control {
    flex: 1 1 auto;
    min-width: 0
}

.hqac-inline-row .btn-big-primary,
.hqac-inline-row .component_button_save {
    flex: 0 0 auto;
    width: auto;
    min-width: 135px
}

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

.hqac-page .btn-big-primary,
.hqac-modal .btn-big-primary {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 47px;
    padding: 12px 18px;
    border: 1px solid var(--hqac-lime) !important;
    border-radius: 11px !important;
    background: linear-gradient(135deg, var(--hqac-lime), #a6ef2e) !important;
    color: #10200d !important;
    box-shadow: 0 12px 28px rgba(201, 255, 66, .14);
    font: 800 13.5px 'DM Sans', sans-serif !important;
    text-shadow: none !important;
    cursor: pointer;
    transition: .2s
}

.hqac-page .btn-big-primary:hover,
.hqac-modal .btn-big-primary:hover {
    transform: translateY(-2px);
    background: #dcff78 !important;
    color: #10200d !important;
    box-shadow: 0 16px 34px rgba(201, 255, 66, .22)
}

.hqac-page .btn-big-primary svg {
    width: 16px;
    height: 16px
}

.hqac-page .btn-big-primary.hqac-btn--danger {
    border-color: rgba(255, 110, 110, .55) !important;
    background: linear-gradient(135deg, #ff7b7b, #ee5252) !important;
    color: #320c0c !important;
    box-shadow: 0 12px 28px rgba(255, 90, 90, .14)
}

.hqac-page .btn-big-primary.hqac-btn--danger:hover {
    background: #ff9090 !important;
    box-shadow: 0 16px 34px rgba(255, 90, 90, .22)
}

.hqac-page .form-group:last-child,
.hqac-page form > :last-child {
    margin-bottom: 0
}

/* ================= MODALS ================= */

.hqac-modal.modal {
    display: none;
    position: fixed;
    z-index: 2050;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden auto;
    outline: 0
}

.hqac-modal.modal.show {
    display: block
}

.hqac-modal .modal-dialog {
    max-width: 470px;
    margin: 8vh auto 24px;
    padding: 0 12px
}

.hqac-modal-backdrop {
    position: fixed;
    z-index: 2040;
    inset: 0;
    background: rgba(2, 10, 6, .72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: hqacFadeIn .2s ease-out
}

body.modal-open {
    overflow: hidden
}

.hqac-modal .modal-content {
    border: 1px solid rgba(201, 255, 66, .22);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(16, 49, 28, .98), rgba(7, 24, 14, .99));
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
    color: var(--hqac-text)
}

.hqac-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 19px;
    border-bottom: 1px solid var(--hqac-line)
}

.hqac-modal .modal-title {
    margin: 0;
    color: var(--hqac-text);
    font: 700 17px 'Space Grotesk', sans-serif;
    letter-spacing: -.03em
}

.hqac-modal .modal-header .close {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(201, 255, 66, .2);
    border-radius: 9px;
    background: rgba(201, 255, 66, .06);
    color: var(--hqac-muted);
    font-size: 16px;
    line-height: 1;
    opacity: 1;
    text-shadow: none;
    transition: .18s
}

.hqac-modal .modal-header .close:hover {
    background: rgba(201, 255, 66, .14);
    color: var(--hqac-lime)
}

.hqac-modal .modal-body {
    padding: 18px 19px
}

.hqac-modal .modal-body label {
    display: block;
    margin: 0 0 7px;
    color: #dce7d9;
    font-size: 12px;
    font-weight: 700
}

.hqac-modal .modal-body .form-group {
    margin: 0 0 14px
}

.hqac-modal .modal-footer {
    padding: 14px 19px 17px;
    border-top: 1px solid var(--hqac-line)
}

.hqac-modal .modal-footer .btn-big-primary {
    margin: 0
}

/* ================= RESPONSIVE ================= */

@media(max-width:900px) {
    .hqac-grid {
        grid-template-columns: minmax(0, 1fr)
    }
}

@media(max-width:640px) {
    .hqac-page {
        padding: 16px 10px 42px
    }
    .hqac-hero {
        align-items: flex-start;
        gap: 13px;
        margin-bottom: 13px;
        padding: 15px;
        border-radius: 16px
    }
    .hqac-avatar {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
        border-radius: 14px;
        font-size: 20px
    }
    .hqac-card {
        padding: 15px;
        border-radius: 16px
    }
    .hqac-head-icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        border-radius: 11px
    }
    .hqac-head-icon svg {
        width: 19px;
        height: 19px
    }
}

@media(max-width:560px) {
    .hqac-inline-row {
        flex-direction: column;
        align-items: stretch
    }
    .hqac-inline-row .btn-big-primary,
    .hqac-inline-row .component_button_save {
        width: 100%
    }
}






:root {
    --hqaf-bg: #06150e;
    --hqaf-soft: #0a1d13;
    --hqaf-card: #0e2b1a;
    --hqaf-line: rgba(201, 255, 66, .18);
    --hqaf-line2: rgba(201, 255, 66, .48);
    --hqaf-lime: #c9ff42;
    --hqaf-text: #f4f9ec;
    --hqaf-muted: #a6b8a5;
    --hqaf-muted2: #708676;
    --hqaf-shadow: 0 22px 60px rgba(0, 0, 0, .27)
}

.hqaf-page,
.hqaf-page * {
    box-sizing: border-box
}

.hqaf-page {
    min-height: calc(100vh - 78px);
    padding: 28px clamp(14px, 2.4vw, 34px) 60px;
    overflow: hidden;
    color: var(--hqaf-text);
    background: radial-gradient(circle at 8% 0, rgba(157, 255, 70, .09), transparent 28rem), radial-gradient(circle at 94% 20%, rgba(38, 149, 78, .09), transparent 30rem), linear-gradient(180deg, var(--hqaf-bg), var(--hqaf-soft) 50%, var(--hqaf-bg));
    font-family: 'DM Sans', sans-serif
}

.hqaf-page ::selection {
    background: rgba(201, 255, 66, .25)
}

.hqaf-container {
    width: 100%;
    max-width: 1200px;
    margin: auto
}

/* ================= STATS ================= */

.hqaf-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
    margin-bottom: 20px
}

.hqaf-stat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    min-height: 100px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid var(--hqaf-line);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(20, 58, 33, .86), rgba(8, 27, 16, .9));
    transition: .2s
}

.hqaf-stat:after {
    content: '';
    position: absolute;
    right: -34px;
    bottom: -50px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(201, 255, 66, .045)
}

.hqaf-stat:hover {
    transform: translateY(-3px);
    border-color: var(--hqaf-line2);
    box-shadow: var(--hqaf-shadow)
}

.hqaf-stat--balance {
    border-color: rgba(201, 255, 66, .38);
    background: linear-gradient(145deg, rgba(41, 82, 37, .92), rgba(12, 43, 23, .92))
}

.hqaf-stat-icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(201, 255, 66, .22);
    border-radius: 14px;
    background: rgba(201, 255, 66, .08);
    color: var(--hqaf-lime)
}

.hqaf-stat-icon svg {
    width: 23px;
    height: 23px
}

.hqaf-stat-copy {
    position: relative;
    z-index: 1;
    min-width: 0
}

.hqaf-stat-label {
    display: block;
    margin-bottom: 6px;
    color: var(--hqaf-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase
}

.hqaf-stat-value {
    display: block;
    overflow: hidden;
    color: var(--hqaf-text);
    font: 700 clamp(17px, 1.9vw, 24px)/1.1 'Space Grotesk', sans-serif;
    letter-spacing: -.035em;
    text-overflow: ellipsis;
    white-space: nowrap
}

.hqaf-stat--balance .hqaf-stat-value {
    color: var(--hqaf-lime)
}

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

.hqaf-card {
    padding: 20px;
    border: 1px solid var(--hqaf-line);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(16, 49, 28, .92), rgba(7, 24, 14, .95));
    box-shadow: var(--hqaf-shadow)
}

.hqaf-card + .hqaf-card {
    margin-top: 18px
}

.hqaf-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px
}

.hqaf-card-head h1,
.hqaf-card-head h2 {
    margin: 0 0 5px;
    color: var(--hqaf-text);
    font: 700 clamp(22px, 2.3vw, 27px)/1.2 'Space Grotesk', sans-serif;
    letter-spacing: -.045em
}

.hqaf-card-head p {
    margin: 0;
    color: var(--hqaf-muted);
    font-size: 12px;
    line-height: 1.6
}

.hqaf-head-badge {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border: 1px solid var(--hqaf-line);
    border-radius: 14px;
    background: rgba(201, 255, 66, .08);
    color: var(--hqaf-lime)
}

.hqaf-head-badge svg {
    width: 23px;
    height: 23px
}

/* ================= FORM GROUPS / LABELS / INPUTS ================= */

.hqaf-group {
    margin-bottom: 18px
}

.hqaf-page .form-group {
    margin: 0 0 15px
}

.hqaf-page .bop-section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 11px;
    color: #dce7d9;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase
}

.hqaf-page .bop-section-title:before {
    content: '';
    flex: 0 0 22px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--hqaf-lime), transparent)
}

.hqaf-page .control-label,
.hqaf-page label {
    display: block;
    margin: 0 0 7px;
    color: #dce7d9;
    font-size: 12px;
    font-weight: 700
}

.hqaf-page .form-control,
.hqaf-page #addfunds_fields input:not([type=checkbox]):not([type=radio]),
.hqaf-page #addfunds_fields textarea,
.hqaf-page #addfunds_fields select,
.hqaf-page #currency-box input {
    display: block;
    width: 100%;
    min-height: 47px;
    padding: 11px 13px;
    border: 1px solid rgba(201, 255, 66, .18);
    border-radius: 11px;
    background: rgba(3, 18, 9, .5);
    color: var(--hqaf-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
    outline: 0;
    font: 400 13px 'DM Sans', sans-serif;
    transition: .18s
}

.hqaf-page .form-control:focus,
.hqaf-page #addfunds_fields input:focus,
.hqaf-page #addfunds_fields textarea:focus,
.hqaf-page #addfunds_fields select:focus {
    border-color: rgba(201, 255, 66, .68);
    box-shadow: 0 0 0 3px rgba(201, 255, 66, .075)
}

.hqaf-page .form-control::placeholder,
.hqaf-page #addfunds_fields input::placeholder {
    color: var(--hqaf-muted2)
}

.hqaf-page #addfunds_fields input:disabled,
.hqaf-page .form-control:disabled {
    border-color: rgba(201, 255, 66, .3);
    background: rgba(201, 255, 66, .05);
    color: var(--hqaf-lime);
    font-weight: 800;
    opacity: 1;
    cursor: not-allowed
}

.hqaf-page #addfunds_fields input[type=checkbox],
.hqaf-page #addfunds_fields input[type=radio] {
    width: 17px;
    height: 17px;
    accent-color: var(--hqaf-lime);
    cursor: pointer;
    vertical-align: middle
}

.hqaf-page #amount-fields > label.control-label {
    color: var(--hqaf-lime)
}

#currency-box {
    padding: 14px;
    border: 1px dashed rgba(201, 255, 66, .25);
    border-radius: 14px;
    background: rgba(201, 255, 66, .04)
}

/* ================= PAYMENT METHOD CARDS ================= */

.hqaf-page .bop-method-ui-wrapper {
    margin-bottom: 3px
}

.hqaf-page .bop-method-ui {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 10px;
    width: 100%
}

.hqaf-page .bop-method-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 14px 9px 12px;
    border: 1px solid rgba(201, 255, 66, .17);
    border-radius: 14px;
    background: rgba(17, 53, 29, .68);
    color: var(--hqaf-text);
    text-align: center;
    cursor: pointer;
    transition: .18s;
    -webkit-user-select: none;
    user-select: none
}

.hqaf-page .bop-method-card:hover {
    transform: translateY(-2px);
    border-color: rgba(201, 255, 66, .55);
    background: rgba(201, 255, 66, .08)
}

.hqaf-page .bop-method-card.active {
    border-color: var(--hqaf-lime);
    background: rgba(201, 255, 66, .12);
    box-shadow: 0 9px 24px rgba(201, 255, 66, .12)
}

.hqaf-page .bop-method-card img.method-logo {
    display: block;
    width: 44px;
    height: 44px;
    padding: 5px;
    border-radius: 11px;
    background: #fff;
    object-fit: contain
}

.hqaf-page .bop-method-card .default-logo {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(201, 255, 66, .3);
    border-radius: 11px;
    background: linear-gradient(145deg, rgba(41, 82, 37, .95), rgba(12, 43, 23, .95));
    color: var(--hqaf-lime);
    font: 800 15px 'Space Grotesk', sans-serif;
    letter-spacing: .02em
}

.hqaf-page .bop-method-card .method-name {
    max-width: 100%;
    overflow: hidden;
    color: var(--hqaf-text);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap
}

.hqaf-page .bop-method-card.active .method-name {
    color: var(--hqaf-lime)
}

.hqaf-page .bop-method-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    border: 1.5px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    background: transparent;
    transition: .18s
}

.hqaf-page .bop-method-card.active .bop-method-check {
    border-color: var(--hqaf-lime);
    background: var(--hqaf-lime)
}

.hqaf-page .bop-method-check:after {
    content: '';
    position: absolute;
    left: 5px;
    top: 4.5px;
    width: 6px;
    height: 4px;
    border-left: 2px solid transparent;
    border-bottom: 2px solid transparent;
    transform: rotate(-45deg)
}

.hqaf-page .bop-method-card.active .bop-method-check:after {
    border-left-color: #12210d;
    border-bottom-color: #12210d
}

/* ================= METHOD : CUSTOM DROPDOWN (new) ================= */

/* the real select stays in the form (logic untouched) but is visually
   replaced by the custom dropdown below */
.hqaf-method-picker {
    position: relative;
    margin-top: 12px
}

.hqaf-method-picker select#payment_method {
    display: none !important
}

.hqaf-picker-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 50px;
    padding: 6px 44px 6px 6px;
    border: 1px solid rgba(201, 255, 66, .22);
    border-radius: 13px;
    background: rgba(3, 18, 9, .5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
    color: var(--hqaf-text);
    font-family: 'DM Sans', sans-serif;
    text-align: left;
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s
}

.hqaf-picker-btn:hover {
    border-color: rgba(201, 255, 66, .45)
}

.hqaf-method-picker.is-open .hqaf-picker-btn,
.hqaf-picker-btn:focus-visible {
    border-color: rgba(201, 255, 66, .68);
    box-shadow: 0 0 0 3px rgba(201, 255, 66, .075);
    outline: 0
}

.hqaf-picker-btn-logo {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    overflow: hidden;
    border: 1px solid rgba(201, 255, 66, .3);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(41, 82, 37, .95), rgba(12, 43, 23, .95));
    color: var(--hqaf-lime);
    font: 800 12px 'Space Grotesk', sans-serif
}

.hqaf-picker-btn-logo.has-logo {
    background: #fff;
    border-color: rgba(255, 255, 255, .85)
}

.hqaf-picker-btn-logo img {
    display: block;
    width: 26px;
    height: 26px;
    object-fit: contain
}

.hqaf-picker-btn-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font: 700 13.5px 'DM Sans', sans-serif;
    letter-spacing: .01em;
    text-overflow: ellipsis;
    white-space: nowrap
}

.hqaf-picker-chevron {
    position: absolute;
    right: 16px;
    top: 37px;
    width: 15px;
    height: 15px;
    color: var(--hqaf-lime);
    pointer-events: none;
    transition: transform .18s
}

.hqaf-method-picker.is-open .hqaf-picker-chevron {
    transform: rotate(180deg)
}

/* ------- dropdown menu ------- */
.hqaf-picker-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 70;
    display: none;
    max-height: 308px;
    padding: 6px;
    overflow-y: auto;
    border: 1px solid rgba(201, 255, 66, .24);
    border-radius: 14px;
    background: #0b2116;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55)
}

.hqaf-picker-menu.is-open {
    display: block;
    animation: hqafPickerIn .16s ease-out
}

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

.hqaf-picker-menu::-webkit-scrollbar {
    width: 6px
}

.hqaf-picker-menu::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .03);
    border-radius: 8px
}

.hqaf-picker-menu::-webkit-scrollbar-thumb {
    background: rgba(201, 255, 66, .28);
    border-radius: 8px
}

.hqaf-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #dce8d9;
    font: 700 12.5px 'DM Sans', sans-serif;
    text-align: left;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s
}

.hqaf-picker-item + .hqaf-picker-item {
    margin-top: 2px
}

.hqaf-picker-item:hover {
    background: rgba(201, 255, 66, .08);
    color: var(--hqaf-lime)
}

.hqaf-picker-item.is-selected {
    border-color: rgba(201, 255, 66, .42);
    background: rgba(201, 255, 66, .12);
    color: var(--hqaf-lime)
}

.hqaf-picker-item-logo {
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    overflow: hidden;
    border: 1px solid rgba(201, 255, 66, .28);
    border-radius: 9px;
    background: linear-gradient(145deg, rgba(41, 82, 37, .95), rgba(12, 43, 23, .95));
    color: var(--hqaf-lime);
    font: 800 10.5px 'Space Grotesk', sans-serif
}

.hqaf-picker-item-logo.has-logo {
    background: #fff;
    border-color: rgba(255, 255, 255, .85)
}

.hqaf-picker-item-logo img {
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain
}

.hqaf-picker-item-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.hqaf-picker-item-check {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    color: var(--hqaf-lime);
    opacity: 0;
    transition: opacity .15s
}

.hqaf-picker-item.is-selected .hqaf-picker-item-check {
    opacity: 1
}


/* ================= INSTRUCTION ================= */

.hqaf-page .hqaf-instruction,
.hqaf-page #instruction_instruction {
    margin: 0 0 18px;
    padding: 14px;
    border: 1px solid rgba(201, 255, 66, .15);
    border-radius: 14px;
    background: rgba(4, 20, 10, .4)
}

.hqaf-page #method_instructions {
    color: #d1ded0;
    font-size: 12px;
    line-height: 1.75;
    text-align: left;
    overflow-wrap: anywhere
}

.hqaf-page #method_instructions strong,
.hqaf-page #method_instructions b {
    color: var(--hqaf-lime)
}

.hqaf-page #method_instructions a {
    color: var(--hqaf-lime);
    text-decoration: underline
}

.hqaf-page #method_instructions img {
    max-width: 100%;
    border-radius: 10px
}

/* ================= QUICK AMOUNT CHIPS ================= */

.hqaf-page .bop-amount-ui {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
    gap: 9px
}

.hqaf-page .bop-amount-chip {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 9px;
    border: 1px solid rgba(201, 255, 66, .17);
    border-radius: 11px;
    background: rgba(17, 53, 29, .68);
    color: var(--hqaf-text);
    font: 700 13.5px 'Space Grotesk', sans-serif;
    text-align: center;
    cursor: pointer;
    transition: .18s;
    -webkit-user-select: none;
    user-select: none
}

.hqaf-page .bop-amount-chip:hover {
    transform: translateY(-2px);
    border-color: rgba(201, 255, 66, .55);
    background: rgba(201, 255, 66, .1);
    color: var(--hqaf-lime)
}

.hqaf-page .bop-amount-chip.active {
    border-color: var(--hqaf-lime);
    background: linear-gradient(135deg, var(--hqaf-lime), #9aea28);
    color: #12210d;
    box-shadow: 0 9px 24px rgba(201, 255, 66, .15)
}

.hqaf-page .bop-amount-clear {
    position: absolute;
    top: -7px;
    right: -7px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border: 1px solid rgba(255, 143, 130, .5);
    border-radius: 50%;
    background: #1c0d0b;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
    opacity: 0;
    pointer-events: none;
    transition: .15s
}

.hqaf-page .bop-amount-clear:before,
.hqaf-page .bop-amount-clear:after {
    content: '';
    position: absolute;
    width: 8px;
    height: 1.6px;
    border-radius: 2px;
    background: #ff8f82
}

.hqaf-page .bop-amount-clear:before {
    transform: rotate(45deg)
}

.hqaf-page .bop-amount-clear:after {
    transform: rotate(-45deg)
}

.hqaf-page .bop-amount-chip:hover .bop-amount-clear,
.hqaf-page .bop-amount-chip.active .bop-amount-clear {
    opacity: 1;
    pointer-events: auto
}

/* ================= OVERVIEW (TOTAL YOU GET) ================= */

.hqaf-page .bop-overview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 4px 0 16px;
    padding: 17px 18px;
    border: 1px solid rgba(201, 255, 66, .45);
    border-radius: 15px;
    background: linear-gradient(135deg, var(--hqaf-lime), #9aea28);
    box-shadow: 0 14px 32px rgba(201, 255, 66, .14)
}

.hqaf-page .bop-overview-left {
    min-width: 0
}

.hqaf-page .bop-overview-label {
    margin-bottom: 4px;
    color: rgba(18, 33, 13, .75);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase
}

.hqaf-page .bop-overview-value,
.hqaf-page #total_amount_display {
    color: #10200d;
    font: 700 clamp(24px, 3vw, 32px)/1.05 'Space Grotesk', sans-serif;
    letter-spacing: -.04em;
    overflow-wrap: anywhere
}

.hqaf-page #bonus_badge {
    color: #1b5e14 !important;
    font-weight: 700
}

.hqaf-page #fee_info {
    color: #7a4d00 !important;
    font-weight: 700
}

/* ================= SUBMIT BUTTONS (dynamic) ================= */

.hqaf-page #addfunds_fields button[type=submit],
.hqaf-page #addfunds_fields .btn-primary,
.hqaf-page #addfunds_fields input[type=submit],
.hqaf-page .component_button_submit button[type=submit] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 49px;
    padding: 12px 18px;
    border: 1px solid var(--hqaf-lime);
    border-radius: 11px;
    background: linear-gradient(135deg, var(--hqaf-lime), #a6ef2e);
    color: #10200d !important;
    box-shadow: 0 12px 28px rgba(201, 255, 66, .16);
    font: 800 14px 'DM Sans', sans-serif;
    cursor: pointer;
    transition: .2s
}

.hqaf-page #addfunds_fields button[type=submit]:hover,
.hqaf-page #addfunds_fields .btn-primary:hover,
.hqaf-page .component_button_submit button[type=submit]:hover {
    transform: translateY(-2px);
    background: #dcff78;
    box-shadow: 0 16px 34px rgba(201, 255, 66, .22)
}

/* ================= ALERTS (twig + ajax injected) ================= */

.hqaf-page .alert {
    position: relative !important;
    margin: 0 0 18px !important;
    padding: 14px 44px 14px 14px !important;
    border-radius: 14px !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    animation: hqafFadeIn .3s ease-out
}

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

.hqaf-page .alert-success {
    border: 1px solid rgba(201, 255, 66, .35) !important;
    background: linear-gradient(145deg, rgba(14, 43, 24, .95), rgba(6, 25, 13, .98)) !important;
    color: #d8ffb0 !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .3) !important
}

.hqaf-page .alert-danger {
    border: 1px solid rgba(255, 99, 99, .32) !important;
    background: linear-gradient(145deg, rgba(40, 12, 12, .92), rgba(22, 6, 6, .96)) !important;
    color: #ffd8d8 !important;
    box-shadow: 0 14px 36px rgba(255, 60, 60, .12) !important
}

.hqaf-page .alert .close,
.hqaf-page .hqaf-alert-close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    display: grid !important;
    place-items: center !important;
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, .05) !important;
    color: var(--hqaf-muted) !important;
    font-size: 13px !important;
    line-height: 1 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    cursor: pointer !important;
    transition: .18s
}

.hqaf-page .alert .close:hover,
.hqaf-page .hqaf-alert-close:hover {
    background: rgba(255, 255, 255, .15) !important;
    color: var(--hqaf-text) !important
}

.hqaf-page #formSubmitResponseContent {
    color: #d1ded0;
    font-size: 12.5px;
    line-height: 1.7
}

.hqaf-page #formSubmitResponseContent a,
.hqaf-page #formSubmitResponseContent button {
    color: var(--hqaf-lime)
}

.hqaf-page #formSubmitResponseContent img {
    max-width: 100%;
    border-radius: 10px
}

/* ================= PAYMENT HISTORY TABLE ================= */

.hqaf-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--hqaf-line);
    border-radius: 14px;
    background: rgba(4, 20, 10, .4)
}

.hqaf-table-wrap::-webkit-scrollbar {
    height: 7px
}

.hqaf-table-wrap::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .03)
}

.hqaf-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(201, 255, 66, .28);
    border-radius: 10px
}

.hqaf-page table.hqaf-table {
    width: 100%;
    min-width: 680px;
    margin: 0;
    border-collapse: collapse;
    table-layout: auto
}

.hqaf-page table.hqaf-table th,
.hqaf-page table.hqaf-table td {
    padding: 13px 15px;
    border: 0;
    border-bottom: 1px solid rgba(201, 255, 66, .08);
    vertical-align: middle;
    white-space: nowrap
}

.hqaf-page table.hqaf-table thead th {
    background: rgba(201, 255, 66, .05);
    color: var(--hqaf-lime);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: left
}

.hqaf-page table.hqaf-table tbody tr {
    transition: .15s
}

.hqaf-page table.hqaf-table tbody tr:hover {
    background: rgba(201, 255, 66, .045)
}

.hqaf-page table.hqaf-table tbody tr:last-child td {
    border-bottom: 0
}

.hqaf-page table.hqaf-table td {
    color: #d5dfd2;
    font-size: 12.5px
}

.hqaf-page table.hqaf-table th:nth-child(1),
.hqaf-page table.hqaf-table td:nth-child(1) {
    width: 90px
}

.hqaf-page table.hqaf-table th:nth-child(2),
.hqaf-page table.hqaf-table td:nth-child(2) {
    width: 120px
}

.hqaf-page table.hqaf-table th:nth-child(3),
.hqaf-page table.hqaf-table td:nth-child(3) {
    min-width: 160px
}

.hqaf-page table.hqaf-table th:nth-child(4),
.hqaf-page table.hqaf-table td:nth-child(4) {
    min-width: 180px;
    color: var(--hqaf-muted)
}

.hqaf-page table.hqaf-table .badge.badge-pill {
    display: inline-block;
    padding: 5px 11px;
    border-radius: 999px;
    font: 800 11px 'Space Grotesk', sans-serif;
    letter-spacing: .02em
}

.hqaf-page table.hqaf-table .badge.badge-secondary {
    border: 1px solid rgba(201, 255, 66, .25) !important;
    background: rgba(201, 255, 66, .06) !important;
    color: var(--hqaf-muted) !important
}

.hqaf-page table.hqaf-table .badge.badge-success {
    border: 1px solid rgba(201, 255, 66, .5) !important;
    background: linear-gradient(135deg, var(--hqaf-lime), #9aea28) !important;
    color: #12210d !important
}

.hqaf-table-empty {
    padding: 34px 15px !important;
    color: var(--hqaf-muted) !important;
    font-size: 12.5px !important;
    text-align: center !important
}

.hqaf-note {
    margin-top: 18px;
    padding: 15px 16px;
    border: 1px solid var(--hqaf-line);
    border-radius: 14px;
    background: rgba(201, 255, 66, .04);
    color: #d1ded0;
    font-size: 12.5px;
    line-height: 1.75;
    overflow-wrap: anywhere
}

.hqaf-note a {
    color: var(--hqaf-lime)
}

/* ================= RESPONSIVE ================= */

@media(max-width:860px) {
    .hqaf-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 9px
    }
    .hqaf-stat {
        min-height: 88px;
        padding: 13px;
        gap: 9px
    }
    .hqaf-stat-icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        border-radius: 11px
    }
    .hqaf-stat-icon svg {
        width: 19px;
        height: 19px
    }
    .hqaf-stat-label {
        font-size: 8.5px
    }
    .hqaf-stat-value {
        font-size: 15px
    }
}

@media(max-width:640px) {
    .hqaf-page {
        padding: 16px 10px 42px
    }
    .hqaf-stats {
        margin-bottom: 13px
    }
    .hqaf-card {
        padding: 13px;
        border-radius: 16px
    }
    .hqaf-card + .hqaf-card {
        margin-top: 13px
    }
    .hqaf-head-badge {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        border-radius: 12px
    }
    /* slim horizontal method cards on mobile */
    .hqaf-page .bop-method-ui {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px
    }
    .hqaf-page .bop-method-card {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        min-height: 0;
        padding: 7px 9px;
        border-radius: 11px;
        text-align: left
    }
    .hqaf-page .bop-method-card img.method-logo,
    .hqaf-page .bop-method-card .default-logo {
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
        padding: 3px;
        border-radius: 8px;
        font-size: 10px
    }
    .hqaf-page .bop-method-card .method-name {
        flex: 1 1 auto;
        font-size: 11px;
        text-align: left
    }
    .hqaf-page .bop-method-check {
        top: 5px;
        right: 5px;
        width: 14px;
        height: 14px
    }
    .hqaf-page .bop-method-check:after {
        left: 4px;
        top: 3.5px;
        width: 5px;
        height: 3px
    }
    .hqaf-page .bop-amount-ui {
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
        gap: 7px
    }
    .hqaf-page .bop-overview {
        padding: 14px
    }
}

@media(max-width:400px) {
    .hqaf-page .bop-method-ui {
        grid-template-columns: 1fr 1fr;
        gap: 6px
    }
    .hqaf-page .bop-method-card {
        gap: 7px;
        padding: 6px 8px
    }
    .hqaf-page .bop-method-card .method-name {
        font-size: 10.5px
    }
}

@media(max-width:560px) {
    .hqaf-page #amount-fields {
        flex-direction: column !important;
        gap: 0 !important
    }
    .hqaf-page #amount-fields > div {
        width: 100% !important
    }
    .hqaf-page #amount-fields > label.control-label {
        margin: 0 !important;
        padding: 5px 0;
        justify-content: center !important
    }
    .hqaf-page #amount-fields > label.control-label i {
        transform: rotate(90deg)
    }
}

@media(max-width:520px) {
    .hqaf-stats {
        grid-template-columns: 1fr 1fr
    }
    .hqaf-stat:last-child {
        grid-column: 1 / -1
    }
}
</style>

<!-- ============================================================
     BINANCE MODAL DESIGN v2 — backend `modals` markup untouched.
     All paint properties use !important because the theme CDN CSS
     ships a white .modal-content with !important.
     ============================================================ -->
<style id="hqaf-binance-modal">
#binance-qr-modal {
    font-family: 'DM Sans', sans-serif;
    -webkit-font-smoothing: antialiased
}

#binance-qr-modal .hidden {
    display: none !important
}

#binance-qr-modal .binance-modal-dialog {
    width: calc(100% - 24px) !important;
    max-width: 432px !important;
    margin: 7vh auto 3vh !important
}

#binance-qr-modal .binance-modal-content,
#binance-qr-modal .binance-modal-content.modal-content {
    overflow: hidden !important;
    border: 1px solid rgba(201, 255, 66, .22) !important;
    border-radius: 20px !important;
    background: linear-gradient(160deg, #0e2b1a, #07180e 70%) !important;
    background-image: linear-gradient(160deg, #0e2b1a, #07180e 70%) !important;
    background-color: #0a2013 !important;
    color: #f4f9ec !important;
    box-shadow: 0 34px 90px rgba(0, 0, 0, .6) !important
}

#binance-qr-modal .binance-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 17px 20px 15px !important;
    border-bottom: 1px solid rgba(201, 255, 66, .12) !important;
    background: rgba(201, 255, 66, .045) !important
}

#binance-qr-modal .binance-modal-title,
#binance-qr-modal .binance-modal-header .binance-modal-title {
    margin: 0 !important;
    color: #f4f9ec !important;
    font: 700 16.5px 'Space Grotesk', sans-serif !important;
    letter-spacing: -.01em !important
}

#binance-qr-modal .binance-btn-close {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border: 1px solid rgba(201, 255, 66, .25) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .04) !important;
    color: #a6b8a5 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    cursor: pointer !important;
    transition: .18s !important
}

#binance-qr-modal .binance-btn-close:hover {
    border-color: #c9ff42 !important;
    color: #c9ff42 !important;
    transform: rotate(90deg) !important
}

#binance-qr-modal .binance-modal-body {
    max-height: calc(100vh - 210px) !important;
    padding: 16px 20px 10px !important;
    background: transparent !important;
    color: #f4f9ec !important;
    overflow-y: auto !important
}

#binance-qr-modal .binance-modal-body::-webkit-scrollbar {
    width: 6px
}

#binance-qr-modal .binance-modal-body::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background: rgba(201, 255, 66, .25)
}

/* ---- alerts ---- */
#binance-qr-modal .binance-alert {
    margin: 0 0 12px !important;
    padding: 11px 13px !important;
    border-radius: 11px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.55 !important
}

#binance-qr-modal .binance-alert-danger {
    border: 1px solid rgba(255, 99, 99, .35) !important;
    background: rgba(60, 12, 12, .55) !important;
    color: #ffd2d2 !important
}

#binance-qr-modal .binance-alert-success {
    border: 1px solid rgba(201, 255, 66, .4) !important;
    background: rgba(201, 255, 66, .09) !important;
    color: #ddffad !important
}

/* ---- steps ---- */
#binance-qr-modal .binance-steps {
    display: flex !important;
    align-items: flex-start !important;
    margin: 2px 0 18px !important
}

#binance-qr-modal .binance-step {
    display: flex !important;
    flex: 1 1 0 !important;
    align-items: center !important;
    min-width: 0 !important
}

#binance-qr-modal .binance-step-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 2px !important;
    text-align: center !important
}

#binance-qr-modal .binance-step-num {
    display: grid !important;
    place-items: center !important;
    width: 30px !important;
    height: 30px !important;
    border: 1.5px solid rgba(201, 255, 66, .3) !important;
    border-radius: 50% !important;
    background: rgba(201, 255, 66, .05) !important;
    color: #a6b8a5 !important;
    font: 700 13px 'Space Grotesk', sans-serif !important;
    transition: .2s !important
}

#binance-qr-modal .binance-step-num.active {
    border-color: #c9ff42 !important;
    background: linear-gradient(135deg, #c9ff42, #9aea28) !important;
    color: #10200d !important;
    box-shadow: 0 0 0 4px rgba(201, 255, 66, .14) !important
}

#binance-qr-modal .binance-step-label {
    color: #708676 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important
}

#binance-qr-modal .binance-step-wrap:has(.active) .binance-step-label {
    color: #c9ff42 !important
}

#binance-qr-modal .binance-step-line,
#binance-qr-modal .binance-step .step-line {
    flex: 1 1 auto !important;
    height: 2px !important;
    margin: 16px 6px 0 !important;
    border: 0 !important;
    border-radius: 2px !important;
    background: rgba(201, 255, 66, .16) !important
}

#binance-qr-modal .binance-step.start > .before,
#binance-qr-modal .binance-step.end > .after {
    visibility: hidden !important
}

#binance-qr-modal #binance-steps.on-step-2 .binance-step.start .after,
#binance-qr-modal #binance-steps.on-step-2 .binance-step.end .before {
    background: #c9ff42 !important
}

/* ---- amount hero ---- */
#binance-qr-modal .binance-amount {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
    padding: 14px !important;
    border: 1px solid rgba(201, 255, 66, .3) !important;
    border-radius: 14px !important;
    background: #08160c !important
}

#binance-qr-modal .binance-amount .binance-amount-value,
#binance-qr-modal .binance-amount .binance-amount-value strong {
    color: #c9ff42 !important;
    font: 700 30px 'Space Grotesk', sans-serif !important;
    letter-spacing: -.03em !important
}

#binance-qr-modal .binance-currency-value {
    padding: 3px 9px !important;
    border: 1px solid rgba(201, 255, 66, .35) !important;
    border-radius: 999px !important;
    background: rgba(201, 255, 66, .08) !important;
    color: #ddffad !important;
    font: 800 11px 'Space Grotesk', sans-serif !important;
    letter-spacing: .06em !important
}

/* ---- inputs ---- */
#binance-qr-modal .binance-form-group {
    margin-bottom: 14px !important
}

#binance-qr-modal .binance-form-group .control-label,
#binance-qr-modal .control-label {
    display: block !important;
    margin: 0 0 7px !important;
    color: #dce7d9 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important
}

#binance-qr-modal .binance-form-control,
#binance-qr-modal input.binance-form-control {
    display: block !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(201, 255, 66, .2) !important;
    border-radius: 11px !important;
    background: #040f08 !important;
    color: #f4f9ec !important;
    outline: 0 !important;
    box-shadow: none !important;
    font: 600 13px ui-monospace, 'SF Mono', Consolas, monospace !important;
    transition: .18s !important
}

#binance-qr-modal .binance-form-control:focus {
    border-color: rgba(201, 255, 66, .7) !important;
    box-shadow: 0 0 0 3px rgba(201, 255, 66, .1) !important
}

#binance-qr-modal .binance-form-control[readonly] {
    border-style: dashed !important;
    color: #c9ff42 !important
}

#binance-qr-modal .binance-input-group {
    display: flex !important;
    align-items: stretch !important
}

#binance-qr-modal .binance-input-group .binance-form-control {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    border-radius: 11px 0 0 11px !important
}

#binance-qr-modal .binance-input-group .binance-input-group-btn {
    display: flex !important;
    width: auto !important
}

#binance-qr-modal .binance-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 10px 14px !important;
    border-radius: 11px !important;
    font: 800 12.5px 'DM Sans', sans-serif !important;
    cursor: pointer !important;
    transition: .18s !important
}

#binance-qr-modal .binance-btn-default {
    border: 1px solid rgba(201, 255, 66, .4) !important;
    border-left: 0 !important;
    border-radius: 0 11px 11px 0 !important;
    background: rgba(201, 255, 66, .1) !important;
    color: #c9ff42 !important
}

#binance-qr-modal .binance-btn-default:hover {
    background: rgba(201, 255, 66, .2) !important
}

/* ---- QR + instructions ---- */
#binance-qr-modal .binance-pay-instruction {
    margin-top: 16px !important;
    padding: 14px !important;
    border: 1px solid rgba(201, 255, 66, .15) !important;
    border-radius: 14px !important;
    background: #050f09 !important;
    text-align: center !important
}

#binance-qr-modal .binance-pay-instruction img#binance-qr-code-image,
#binance-qr-modal img#binance-qr-code-image {
    display: block !important;
    width: 178px !important;
    height: 178px !important;
    max-width: 178px !important;
    max-height: 178px !important;
    min-width: 0 !important;
    margin: 2px auto 12px !important;
    padding: 8px !important;
    border: 1px solid rgba(201, 255, 66, .4) !important;
    border-radius: 14px !important;
    background: #fff !important;
    object-fit: contain !important;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .4) !important
}

#binance-qr-modal .binance-pay-instruction-text,
#binance-qr-modal .binance-verify-instruction-text {
    color: #b8cbb6 !important;
    font-size: 12.5px !important;
    line-height: 1.7 !important;
    text-align: left !important
}

#binance-qr-modal .binance-pay-instruction-text p,
#binance-qr-modal .binance-verify-instruction-text p {
    margin: 0 0 7px !important;
    color: #b8cbb6 !important
}

#binance-qr-modal .binance-pay-instruction-text p:last-child,
#binance-qr-modal .binance-verify-instruction-text p:last-child {
    margin-bottom: 0 !important
}

#binance-qr-modal .binance-pay-instruction-text i,
#binance-qr-modal .binance-pay-instruction-text strong,
#binance-qr-modal .binance-verify-instruction-text strong {
    color: #c9ff42 !important
}

/* ---- step 2 : amount + uuid summary ---- */
#binance-qr-modal .binance-amount-uuid {
    display: grid !important;
    grid-template-columns: 1fr 1.35fr !important;
    gap: 10px !important;
    margin-bottom: 14px !important
}

#binance-qr-modal .binance-amount-uuid .amount-block,
#binance-qr-modal .binance-amount-uuid .uuid-block {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding: 11px 12px !important;
    border: 1px solid rgba(201, 255, 66, .2) !important;
    border-radius: 11px !important;
    background: #040f08 !important
}

#binance-qr-modal .binance-amount-uuid .amount-label,
#binance-qr-modal .binance-amount-uuid .uuid-label {
    margin: 0 0 6px !important;
    color: #a6b8a5 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important
}

#binance-qr-modal .binance-amount-uuid .binance-amount-value {
    color: #c9ff42 !important;
    font: 700 20px 'Space Grotesk', sans-serif !important;
    letter-spacing: -.02em !important
}

#binance-qr-modal .binance-amount-uuid .binance-currency-value {
    font-size: 9.5px !important;
    padding: 2px 7px !important
}

#binance-qr-modal .binance-amount-uuid .binance-uuid-value {
    overflow: hidden !important;
    color: #f4f9ec !important;
    font: 600 12.5px ui-monospace, 'SF Mono', Consolas, monospace !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important
}

#binance-qr-modal .binance-uuid-value-copy {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    margin-left: auto !important;
    padding: 0 !important;
    border: 1px solid rgba(201, 255, 66, .35) !important;
    border-radius: 8px !important;
    background: rgba(201, 255, 66, .09) !important;
    color: #c9ff42 !important;
    font-size: 12px !important;
    cursor: pointer !important;
    transition: .18s !important
}

#binance-qr-modal .binance-uuid-value-copy:hover {
    background: rgba(201, 255, 66, .2) !important
}

#binance-qr-modal .binance-order-id {
    margin-bottom: 2px !important
}

#binance-qr-modal .binance-verify-instruction {
    padding: 12px 14px !important;
    border: 1px dashed rgba(201, 255, 66, .25) !important;
    border-radius: 12px !important;
    background: #08160c !important
}

/* ---- footer button ---- */
#binance-qr-modal .binance-modal-footer {
    padding: 8px 20px 18px !important;
    border: 0 !important;
    border-top: 0 !important;
    background: transparent !important;
    box-shadow: none !important
}

#binance-qr-modal .binance-btn-primary,
#binance-qr-modal .binance-btn-primary.binance-btn-block {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 18px !important;
    border: 1px solid #c9ff42 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #c9ff42, #a6ef2e) !important;
    color: #10200d !important;
    box-shadow: 0 12px 28px rgba(201, 255, 66, .18) !important;
    text-shadow: none !important;
    font: 800 14px 'DM Sans', sans-serif !important;
    letter-spacing: .01em !important;
    cursor: pointer !important;
    transition: .2s !important
}

#binance-qr-modal .binance-btn-primary.binance-btn-block:hover:not(:disabled) {
    transform: translateY(-2px) !important;
    background: #dcff78 !important
}

#binance-qr-modal .binance-btn-primary.binance-btn-block:disabled {
    cursor: wait !important;
    opacity: .75 !important
}

/* dark backdrop for this modal (theme default kept for others) */
.modal-backdrop {
    background-color: #020a05 !important
}

.modal-backdrop.in,
.modal-backdrop.show {
    opacity: .85 !important
}

@media(max-width:480px) {
    #binance-qr-modal .binance-modal-dialog {
        width: calc(100% - 16px) !important;
        margin: 4vh auto 2vh !important
    }
    #binance-qr-modal .binance-modal-body {
        padding: 14px 15px 8px !important
    }
    #binance-qr-modal .binance-modal-header,
    #binance-qr-modal .binance-modal-footer {
        padding-left: 15px !important;
        padding-right: 15px !important
    }
    #binance-qr-modal .binance-amount-uuid {
        grid-template-columns: 1fr !important
    }
    #binance-qr-modal .binance-step-label {
        font-size: 8.5px !important
    }
}



:root {
    --hqap-bg: #06150e;
    --hqap-soft: #0a1d13;
    --hqap-card: #0e2b1a;
    --hqap-line: rgba(201, 255, 66, .18);
    --hqap-line2: rgba(201, 255, 66, .48);
    --hqap-lime: #c9ff42;
    --hqap-text: #f4f9ec;
    --hqap-muted: #a6b8a5;
    --hqap-muted2: #708676;
    --hqap-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    --hqap-shadow: 0 22px 60px rgba(0, 0, 0, .27)
}

.hqap-page,
.hqap-page * {
    box-sizing: border-box
}

.hqap-page {
    min-height: calc(100vh - 78px);
    padding: 28px clamp(14px, 2.4vw, 34px) 60px;
    overflow: hidden;
    color: var(--hqap-text);
    background: radial-gradient(circle at 8% 0, rgba(157, 255, 70, .09), transparent 28rem), radial-gradient(circle at 94% 20%, rgba(38, 149, 78, .09), transparent 30rem), linear-gradient(180deg, var(--hqap-bg), var(--hqap-soft) 50%, var(--hqap-bg));
    font-family: 'DM Sans', sans-serif
}

.hqap-page ::selection {
    background: rgba(201, 255, 66, .25)
}

.hqap-container {
    width: 100%;
    max-width: 880px;
    margin: auto
}

/* ================= HERO ================= */

.hqap-hero {
    position: relative;
    margin-bottom: 14px;
    padding: 22px;
    overflow: hidden;
    border: 1px solid var(--hqap-line);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(16, 49, 28, .92), rgba(7, 24, 14, .95));
    box-shadow: var(--hqap-shadow)
}

.hqap-hero:after {
    content: '';
    position: absolute;
    right: -50px;
    top: -80px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(201, 255, 66, .05);
    pointer-events: none
}

.hqap-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--hqap-lime);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase
}

.hqap-hero h1 {
    position: relative;
    z-index: 1;
    margin: 0 0 6px;
    color: var(--hqap-text);
    font: 700 clamp(23px, 2.6vw, 29px)/1.15 'Space Grotesk', sans-serif;
    letter-spacing: -.045em
}

.hqap-hero > p {
    position: relative;
    z-index: 1;
    margin: 0 0 16px;
    color: var(--hqap-muted);
    font-size: 12.5px;
    line-height: 1.65
}

.hqap-endpoint {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px;
    border: 1px solid rgba(201, 255, 66, .22);
    border-radius: 12px;
    background: rgba(3, 18, 9, .55)
}

.hqap-method-badge {
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    padding: 6px 12px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--hqap-lime), #9aea28);
    color: #12210d;
    box-shadow: 0 6px 16px rgba(201, 255, 66, .18);
    font: 800 11.5px var(--hqap-mono);
    letter-spacing: .06em
}

.hqap-method-badge--ghost {
    border: 1px solid rgba(201, 255, 66, .35);
    background: rgba(201, 255, 66, .08);
    color: var(--hqap-lime);
    box-shadow: none
}

.hqap-endpoint code {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--hqap-lime);
    font: 500 12.5px var(--hqap-mono);
    text-overflow: ellipsis;
    white-space: nowrap
}

.hqap-copy {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    min-height: 33px;
    padding: 7px 12px;
    border: 1px solid rgba(201, 255, 66, .3);
    border-radius: 9px;
    background: rgba(201, 255, 66, .08);
    color: var(--hqap-lime);
    font: 800 11px 'DM Sans', sans-serif;
    cursor: pointer;
    transition: .18s
}

.hqap-copy svg {
    width: 14px;
    height: 14px
}

.hqap-copy:hover {
    background: rgba(201, 255, 66, .16);
    transform: translateY(-1px)
}

.hqap-copy.is-copied {
    background: var(--hqap-lime);
    color: #12210d
}

/* ================= QUICK NAV ================= */

.hqap-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 16px
}

.hqap-nav a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 7px 13px;
    border: 1px solid var(--hqap-line);
    border-radius: 999px;
    background: rgba(16, 49, 28, .6);
    color: var(--hqap-muted);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: .18s
}

.hqap-nav a:before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hqap-lime);
    opacity: .55
}

.hqap-nav a:hover {
    border-color: var(--hqap-line2);
    color: var(--hqap-lime);
    transform: translateY(-1px)
}

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

.hqap-card {
    min-width: 0;
    margin-bottom: 16px;
    padding: 20px;
    border: 1px solid var(--hqap-line);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(16, 49, 28, .92), rgba(7, 24, 14, .95));
    box-shadow: var(--hqap-shadow)
}

.hqap-card-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 15px
}

.hqap-head-icon {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 1px solid var(--hqap-line);
    border-radius: 12px;
    background: rgba(201, 255, 66, .08);
    color: var(--hqap-lime)
}

.hqap-head-icon svg {
    width: 21px;
    height: 21px
}

.hqap-head-copy {
    min-width: 0
}

.hqap-head-copy h2 {
    margin: 0 0 3px;
    color: var(--hqap-text);
    font: 700 17px/1.25 'Space Grotesk', sans-serif;
    letter-spacing: -.03em
}

.hqap-head-copy p {
    margin: 0;
    color: var(--hqap-muted2);
    font-size: 11px;
    line-height: 1.55
}

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

.hqap-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--hqap-line);
    border-radius: 13px;
    background: rgba(4, 20, 10, .4)
}

.hqap-table-wrap::-webkit-scrollbar {
    height: 6px
}

.hqap-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(201, 255, 66, .28);
    border-radius: 10px
}

.hqap-page table.hqap-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse
}

.hqap-page table.hqap-table th,
.hqap-page table.hqap-table td {
    padding: 11px 14px;
    border: 0;
    border-bottom: 1px solid rgba(201, 255, 66, .08);
    vertical-align: middle;
    text-align: left
}

.hqap-page table.hqap-table thead th {
    background: rgba(201, 255, 66, .05);
    color: var(--hqap-lime);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap
}

.hqap-page table.hqap-table tbody tr:last-child td {
    border-bottom: 0
}

.hqap-page table.hqap-table tbody tr {
    transition: .15s
}

.hqap-page table.hqap-table tbody tr:hover {
    background: rgba(201, 255, 66, .045)
}

.hqap-page table.hqap-table td {
    color: #d5dfd2;
    font-size: 12.5px;
    line-height: 1.55
}

.hqap-page table.hqap-table td:first-child,
.hqap-page table.hqap-table th.width-40,
.hqap-page table.hqap-table td.width-40 {
    width: 40%
}

.hqap-page table.hqap-table td.hqap-param,
.hqap-page table.hqap-table td:first-child {
    color: var(--hqap-lime);
    font: 600 12px var(--hqap-mono)
}

.hqap-page table.hqap-table td a {
    color: var(--hqap-lime);
    font-weight: 700;
    text-decoration: underline
}

/* ================= SAMPLE CODE ================= */

.hqap-sample-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 15px 0 8px;
    color: #dce7d9;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase
}

.hqap-sample-label svg {
    width: 15px;
    height: 15px;
    color: var(--hqap-lime)
}

.hqap-page pre {
    margin: 0;
    padding: 15px 16px;
    overflow-x: auto;
    border: 1px solid rgba(201, 255, 66, .16);
    border-radius: 13px;
    background: #07190e;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
    color: #b8e694;
    font: 500 11.5px/1.75 var(--hqap-mono);
    white-space: pre
}

.hqap-page pre::-webkit-scrollbar {
    height: 6px
}

.hqap-page pre::-webkit-scrollbar-thumb {
    background: rgba(201, 255, 66, .28);
    border-radius: 10px
}

/* ================= DOWNLOAD BUTTON ================= */

.hqap-page .hqap-download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 49px;
    padding: 12px 18px;
    border: 1px solid var(--hqap-lime);
    border-radius: 11px;
    background: linear-gradient(135deg, var(--hqap-lime), #a6ef2e);
    color: #10200d !important;
    box-shadow: 0 12px 28px rgba(201, 255, 66, .16);
    font: 800 14px 'DM Sans', sans-serif;
    text-decoration: none;
    transition: .2s
}

.hqap-page .hqap-download svg {
    width: 17px;
    height: 17px
}

.hqap-page .hqap-download:hover {
    transform: translateY(-2px);
    background: #dcff78;
    box-shadow: 0 16px 34px rgba(201, 255, 66, .23)
}

/* ================= CUSTOM CONTENT NOTES ================= */

.hqap-note {
    margin: 0 0 16px;
    padding: 15px 16px;
    border: 1px solid var(--hqap-line);
    border-radius: 15px;
    background: rgba(201, 255, 66, .045);
    color: #d1ded0;
    font-size: 12.5px;
    line-height: 1.75;
    overflow-wrap: anywhere
}

.hqap-note a {
    color: var(--hqap-lime)
}

.hqap-note--bottom {
    margin: 16px 0 0
}

/* ================= RESPONSIVE ================= */

@media(max-width:640px) {
    .hqap-page {
        padding: 16px 10px 42px
    }
    .hqap-hero,
    .hqap-card {
        padding: 15px;
        border-radius: 16px
    }
    .hqap-endpoint {
        flex-wrap: wrap
    }
    .hqap-endpoint code {
        order: 3;
        flex-basis: 100%;
        padding-top: 7px;
        white-space: normal;
        word-break: break-all
    }
    .hqap-page pre {
        font-size: 10.5px
    }
}






:root {
    --hqcp-bg: #06150e;
    --hqcp-soft: #0a1d13;
    --hqcp-card: #0e2b1a;
    --hqcp-line: rgba(201, 255, 66, .18);
    --hqcp-line2: rgba(201, 255, 66, .48);
    --hqcp-lime: #c9ff42;
    --hqcp-text: #f4f9ec;
    --hqcp-muted: #a6b8a5;
    --hqcp-muted2: #708676;
    --hqcp-shadow: 0 22px 60px rgba(0, 0, 0, .27)
}

.hqcp-page,
.hqcp-page * {
    box-sizing: border-box
}

.hqcp-page {
    min-height: calc(100vh - 78px);
    padding: 28px clamp(14px, 2.4vw, 34px) 60px;
    overflow: hidden;
    color: var(--hqcp-text);
    background: radial-gradient(circle at 8% 0, rgba(157, 255, 70, .09), transparent 28rem), radial-gradient(circle at 94% 20%, rgba(38, 149, 78, .09), transparent 30rem), linear-gradient(180deg, var(--hqcp-bg), var(--hqcp-soft) 50%, var(--hqcp-bg));
    font-family: 'DM Sans', sans-serif
}

.hqcp-page ::selection {
    background: rgba(201, 255, 66, .25)
}

.hqcp-container {
    width: 100%;
    max-width: 1240px;
    margin: auto
}

/* ================= PAGE HEAD ================= */

.hqcp-head {
    margin-bottom: 16px
}

.hqcp-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--hqcp-lime);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase
}

.hqcp-head h1 {
    margin: 0 0 5px;
    color: var(--hqcp-text);
    font: 700 clamp(23px, 2.6vw, 29px)/1.15 'Space Grotesk', sans-serif;
    letter-spacing: -.045em
}

.hqcp-head p {
    margin: 0;
    color: var(--hqcp-muted);
    font-size: 12px;
    line-height: 1.6
}

/* ================= NOTES ================= */

.hqcp-note {
    margin: 0 0 16px;
    padding: 15px 16px;
    border: 1px solid var(--hqcp-line);
    border-radius: 15px;
    background: rgba(201, 255, 66, .045);
    color: #d1ded0;
    font-size: 12.5px;
    line-height: 1.75;
    overflow-wrap: anywhere
}

.hqcp-note a {
    color: var(--hqcp-lime)
}

.hqcp-note--bottom {
    margin: 16px 0 0
}

/* ================= LAYOUT ================= */

.hqcp-layout {
    display: grid;
    grid-template-columns: minmax(330px, 420px) minmax(0, 1fr);
    align-items: start;
    gap: 18px
}

.hqcp-card {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--hqcp-line);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(16, 49, 28, .92), rgba(7, 24, 14, .95));
    box-shadow: var(--hqcp-shadow)
}

.hqcp-card-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 16px
}

.hqcp-head-icon {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 1px solid var(--hqcp-line);
    border-radius: 12px;
    background: rgba(201, 255, 66, .08);
    color: var(--hqcp-lime)
}

.hqcp-head-icon svg {
    width: 21px;
    height: 21px
}

.hqcp-head-copy {
    min-width: 0
}

.hqcp-head-copy h2 {
    margin: 0 0 3px;
    color: var(--hqcp-text);
    font: 700 17px/1.25 'Space Grotesk', sans-serif;
    letter-spacing: -.03em
}

.hqcp-head-copy p {
    margin: 0;
    color: var(--hqcp-muted2);
    font-size: 11px;
    line-height: 1.55
}

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

.hqcp-page .alert {
    position: relative !important;
    margin: 0 0 16px !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    animation: hqcpFadeIn .3s ease-out
}

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

.hqcp-page .alert-danger {
    border: 1px solid rgba(255, 99, 99, .32) !important;
    background: linear-gradient(145deg, rgba(40, 12, 12, .92), rgba(22, 6, 6, .96)) !important;
    color: #ffd8d8 !important
}

.hqcp-page .alert-success {
    border: 1px solid rgba(201, 255, 66, .35) !important;
    background: linear-gradient(145deg, rgba(14, 43, 24, .95), rgba(6, 25, 13, .98)) !important;
    color: #d8ffb0 !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .3) !important
}

.hqcp-page .alert-success p {
    margin: 0 0 12px;
    color: var(--hqcp-lime) !important;
    font: 700 14px 'Space Grotesk', sans-serif
}

.hqcp-page .alert .close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    display: grid !important;
    place-items: center !important;
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, .05) !important;
    color: inherit !important;
    font-size: 14px !important;
    line-height: 1 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    cursor: pointer !important;
    transition: .18s
}

.hqcp-page .alert .close:hover {
    background: rgba(255, 255, 255, .15) !important
}

/* Success order meta grid */

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

.hqcp-result-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid rgba(201, 255, 66, .12);
    border-radius: 9px;
    background: rgba(3, 18, 9, .45)
}

.hqcp-result-item strong,
.hqcp-result-item span {
    margin: 0
}

.hqcp-result-label {
    margin-bottom: 3px;
    color: var(--hqcp-muted2);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase
}

.hqcp-result-val {
    overflow: hidden;
    color: var(--hqcp-text);
    font-size: 11.5px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap
}

/* ================= FORM ================= */

.hqcp-page .form-group {
    margin: 0 0 14px
}

.hqcp-page label,
.hqcp-page .control-label {
    display: block;
    margin: 0 0 7px;
    color: #dce7d9;
    font-size: 12px;
    font-weight: 700
}

.hqcp-page .form-control {
    display: block;
    width: 100%;
    min-height: 47px;
    padding: 11px 13px;
    border: 1px solid rgba(201, 255, 66, .18);
    border-radius: 11px;
    background: rgba(3, 18, 9, .5);
    color: var(--hqcp-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
    outline: 0;
    font: 400 13px 'DM Sans', sans-serif;
    transition: .18s
}

.hqcp-page .form-control:focus {
    border-color: rgba(201, 255, 66, .68);
    box-shadow: 0 0 0 3px rgba(201, 255, 66, .075)
}

.hqcp-page .form-control::placeholder {
    color: var(--hqcp-muted2)
}

.hqcp-page .form-control[readonly] {
    border-style: dashed;
    background: rgba(201, 255, 66, .05);
    color: var(--hqcp-lime);
    font-weight: 800
}

.hqcp-page select.form-control {
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9ff42' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    appearance: none;
    -webkit-appearance: none
}

.hqcp-page select.form-control option {
    background: #102d1c;
    color: var(--hqcp-text)
}

/* Nameserver box */

.hqcp-page .ChildPanelNote,
.hqcp-nsbox {
    margin: 0 0 15px;
    padding: 13px;
    border: 1px dashed rgba(201, 255, 66, .28);
    border-radius: 13px;
    background: rgba(201, 255, 66, .04)
}

.hqcp-page .ChildPanelNote .help-block,
.hqcp-nsbox-label {
    display: block;
    margin: 0 0 9px;
    color: var(--hqcp-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6
}

.hqcp-page .ChildPanelNote p,
.hqcp-nsrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 6px 0 0;
    padding: 9px 12px;
    border: 1px solid rgba(201, 255, 66, .15);
    border-radius: 9px;
    background: rgba(3, 18, 9, .55)
}

.hqcp-page .ChildPanelNote p b,
.hqcp-nsrow b {
    overflow: hidden;
    color: var(--hqcp-lime);
    font: 700 12.5px 'Space Grotesk', sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap
}

.hqcp-page .ChildPanelNote .copy,
.hqcp-page .copy {
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(201, 255, 66, .3);
    border-radius: 8px;
    background: rgba(201, 255, 66, .08);
    color: var(--hqcp-lime);
    font-size: 11px;
    cursor: pointer;
    transition: .18s
}

.hqcp-page .ChildPanelNote .copy:hover,
.hqcp-page .copy:hover {
    background: var(--hqcp-lime);
    color: #12210d
}

/* Password randomize group */

.hqcp-page .input-group {
    display: flex;
    align-items: stretch
}

.hqcp-page .input-group .form-control {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 11px 0 0 11px;
    border-right: 0
}

.hqcp-page .input-group-append {
    display: flex
}

.hqcp-page .input-group-text {
    display: grid;
    place-items: center;
    min-width: 47px;
    padding: 0 14px;
    border: 1px solid var(--hqcp-lime);
    border-radius: 0 11px 11px 0;
    background: linear-gradient(135deg, var(--hqcp-lime), #a6ef2e);
    color: #10200d !important;
    font-size: 13px;
    cursor: pointer;
    transition: .2s
}

.hqcp-page .input-group-text:hover {
    background: #dcff78
}

/* Submit */

.hqcp-page .btn-big-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 49px;
    margin-top: 18px;
    padding: 12px 18px;
    border: 1px solid var(--hqcp-lime);
    border-radius: 11px;
    background: linear-gradient(135deg, var(--hqcp-lime), #a6ef2e);
    color: #10200d;
    box-shadow: 0 12px 28px rgba(201, 255, 66, .16);
    font: 800 14px 'DM Sans', sans-serif;
    cursor: pointer;
    transition: .2s
}

.hqcp-page .btn-big-primary:hover {
    transform: translateY(-2px);
    background: #dcff78;
    box-shadow: 0 16px 34px rgba(201, 255, 66, .23)
}

/* ================= LOGS TABLE ================= */

.hqcp-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--hqcp-line);
    border-radius: 14px;
    background: rgba(4, 20, 10, .4)
}

.hqcp-table-wrap::-webkit-scrollbar {
    height: 7px
}

.hqcp-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(201, 255, 66, .28);
    border-radius: 10px
}

.hqcp-page table.table {
    width: 100%;
    min-width: 640px;
    margin: 0;
    border-collapse: collapse
}

.hqcp-page table.table th,
.hqcp-page table.table td {
    padding: 12px 15px;
    border: 0;
    border-bottom: 1px solid rgba(201, 255, 66, .08);
    vertical-align: middle;
    text-align: left;
    white-space: nowrap
}

.hqcp-page table.table thead th {
    background: rgba(201, 255, 66, .05);
    color: var(--hqcp-lime);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase
}

.hqcp-page table.table tbody tr {
    transition: .15s
}

.hqcp-page table.table tbody tr:hover {
    background: rgba(201, 255, 66, .045)
}

.hqcp-page table.table tbody tr:last-child td {
    border-bottom: 0
}

.hqcp-page table.table td {
    color: #d5dfd2;
    font-size: 12.5px
}

.hqcp-page table.table td:first-child {
    color: var(--hqcp-lime);
    font: 700 12px 'Space Grotesk', sans-serif
}

.hqcp-page table.table td:nth-child(2) {
    color: var(--hqcp-text);
    font-weight: 700
}

.hqcp-page table.table td:nth-child(4),
.hqcp-page table.table td:last-child {
    color: var(--hqcp-muted)
}

.hqcp-page table.table td.hqcp-empty {
    padding: 36px 15px !important;
    color: var(--hqcp-muted) !important;
    text-align: center
}

.hqcp-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border: 1px solid rgba(126, 245, 155, .3);
    border-radius: 999px;
    background: rgba(126, 245, 155, .08);
    color: #7ef59b;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .03em
}

.hqcp-pill:before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor
}

/* ================= RESPONSIVE ================= */

@media(max-width:1024px) {
    .hqcp-layout {
        grid-template-columns: minmax(0, 1fr)
    }
}

@media(max-width:640px) {
    .hqcp-page {
        padding: 16px 10px 42px
    }
    .hqcp-card {
        padding: 14px;
        border-radius: 16px
    }
    .hqcp-result {
        grid-template-columns: 1fr
    }
}







  .hq-system-footer, .hq-system-footer * { box-sizing: border-box; }
  .hq-system-footer {
    position: relative;
    z-index: 5;
    border-top: 1px solid rgba(201, 255, 66, .12);
    background: linear-gradient(180deg, rgba(7, 24, 14, .96), #06150e);
    color: #a6b8a5;
    font-family: 'DM Sans', sans-serif;
  }
  .hq-system-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: min(520px, 70%);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 255, 66, .55), transparent);
    transform: translateX(-50%);
  }
  .hq-system-footer__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 18px 30px;
    width: min(1180px, calc(100% - 40px));
    margin: auto;
    padding: 28px 0;
  }
  .hq-private-system-footer .hq-system-footer__inner { width: min(1440px, calc(100% - 48px)); }
  .hq-system-footer__brand { display: flex; align-items: center; gap: 10px; color: #f4f9ec; }
  .hq-system-footer__mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #c9ff42;
    color: #10240e;
    box-shadow: 0 0 24px rgba(201, 255, 66, .22);
    font: 800 15px 'Space Grotesk', sans-serif;
  }
  .hq-system-footer__brand strong { display: block; font: 700 14px 'Space Grotesk', sans-serif; }
  .hq-system-footer__brand small { display: block; margin-top: 3px; color: #708676; font-size: 9px; letter-spacing: .04em; }
  .hq-system-footer__links { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
  .hq-system-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #a6b8a5;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    transition: .18s;
  }
  .hq-system-footer__links a:hover {
    border-color: rgba(201, 255, 66, .2);
    background: rgba(201, 255, 66, .055);
    color: #c9ff42;
  }
  .hq-system-footer__copyright {
    grid-column: 1/-1;
    margin: 0;
    padding-top: 15px;
    border-top: 1px solid rgba(201, 255, 66, .08);
    color: #708676;
    font-size: 10px;
    text-align: center;
  }

  /* Public mega footer */
  body:has(.hq-public-system-footer) .hq-landing .hq-footer { display: none !important; }
  .hq-public-system-footer { padding: 18px 14px 24px; background: linear-gradient(180deg, #06150e, #081b11); }
  .hq-mega-footer {
    position: relative;
    width: min(1320px, 100%);
    margin: auto;
    overflow: hidden;
    border: 1px solid rgba(201, 255, 66, .25);
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(18, 49, 27, .96), rgba(7, 29, 17, .98) 48%, rgba(26, 57, 27, .94));
    box-shadow: 0 24px 70px rgba(0, 0, 0, .25);
  }
  .hq-mega-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(201, 255, 66, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(201, 255, 66, .025) 1px, transparent 1px);
    background-size: 62px 62px;
    pointer-events: none;
  }
  .hq-mega-footer__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.35fr .8fr 1fr 1fr;
    gap: clamp(28px, 4vw, 66px);
    padding: 58px 56px 42px;
  }
  .hq-mega-footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: #f4f9ec;
    text-decoration: none;
    font: 800 17px 'Space Grotesk', sans-serif;
  }
  .hq-mega-footer__logo img { display: block; max-width: 190px; max-height: 50px; object-fit: contain; }
  .hq-mega-footer__about > p { max-width: 330px; margin: 0 0 16px; color: #d9ff79; font-size: 14px; font-weight: 600; line-height: 1.72; }
  .hq-mega-contact { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; color: #a6b8a5; font-size: 11px; }
  .hq-mega-contact strong { color: #f4f9ec; }
  
  /* Official Social Buttons */
  .hq-mega-socials { display: flex; gap: 10px; margin-top: 22px; }
  .hq-soc-btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: rgba(4, 22, 12, .85);
    border: 1px solid rgba(201, 255, 66, .2);
    transition: all .25s ease;
  }
  .hq-soc-btn svg { width: 20px; height: 20px; transition: transform .25s ease; }
  .hq-soc-btn:hover { transform: translateY(-3px); }
  .hq-soc-btn:hover svg { transform: scale(1.08); }

  .hq-soc-instagram { color: #fff; }
  .hq-soc-instagram:hover {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    border-color: transparent;
    box-shadow: 0 10px 22px rgba(214, 36, 159, .35);
  }

  .hq-soc-facebook { color: #1877f2; }
  .hq-soc-facebook:hover {
    background: #1877f2;
    color: #fff;
    border-color: #1877f2;
    box-shadow: 0 10px 22px rgba(24, 119, 242, .35);
  }

  .hq-soc-youtube { color: #ff0000; }
  .hq-soc-youtube:hover {
    background: #ff0000;
    color: #fff;
    border-color: #ff0000;
    box-shadow: 0 10px 22px rgba(255, 0, 0, .35);
  }

  .hq-soc-telegram { color: #229ed9; }
  .hq-soc-telegram:hover {
    background: #229ed9;
    color: #fff;
    border-color: #229ed9;
    box-shadow: 0 10px 22px rgba(34, 158, 217, .35);
  }

  /* Columns & Links */
  .hq-mega-column h3 { margin: 3px 0 20px; color: #f4f9ec; font: 700 15px 'Space Grotesk', sans-serif; }
  .hq-mega-column ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
  .hq-mega-column li { min-width: 0; }
  .hq-mega-column li a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #b9c9b6;
    text-decoration: none;
    font-size: 12px;
    line-height: 1.4;
    transition: .18s;
  }
  .hq-mega-column li a:hover { color: #c9ff42; transform: translateX(3px); }

  /* Quick link icons */
  .hq-icon-box {
    display: grid;
    place-items: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(201, 255, 66, .25);
    border-radius: 7px;
    background: rgba(201, 255, 66, .05);
    color: #c9ff42;
  }
  .hq-icon-box svg { width: 13px; height: 13px; }

  /* Services Brand SVG Dots */
  .hq-service-dot {
    display: grid;
    place-items: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
  }
  .hq-service-dot svg { width: 13px; height: 13px; }
  .hq-instagram svg { color: #e1306c; }
  .hq-facebook svg { color: #1877f2; }
  .hq-x svg { color: #ffffff; }
  .hq-youtube svg { color: #ff0000; }
  .hq-spotify svg { color: #1ed760; }
  .hq-tiktok svg { color: #25f4ee; }
  .hq-telegram svg { color: #229ed9; }

  /* Flags */
  .hq-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    width: 20px;
    height: 14px;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .15);
  }
  .hq-flag svg { width: 100%; height: 100%; object-fit: cover; display: block; }

  .hq-mega-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    color: #c9ff42;
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
  }
  .hq-mega-more:hover { color: #e1ff91; }
  .hq-mega-footer__bottom {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    padding: 18px 56px;
    border-top: 1px solid rgba(201, 255, 66, .18);
    background: rgba(201, 255, 66, .055);
    color: #c9ff42;
    font-size: 11px;
    font-weight: 700;
  }
  .hq-mega-footer__bottom a { color: #c9ff42; text-decoration: none; }
  .hq-mega-footer__bottom a:hover { color: #f4f9ec; }
  .hq-mega-footer__bottom p { margin: 0; text-align: center; }
  .hq-mega-footer__bottom nav { display: flex; justify-content: flex-end; gap: 22px; }

  @media(max-width: 1050px) {
    .hq-mega-footer__grid { grid-template-columns: 1.25fr 1fr 1fr; gap: 34px; padding: 44px 36px 36px; }
    .hq-mega-footer__about { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }
    .hq-mega-footer__about .hq-mega-footer__logo { grid-column: 1/-1; }
    .hq-mega-footer__about > p { margin-bottom: 0; }
    .hq-mega-socials { margin-top: 14px; }
    .hq-mega-footer__bottom { padding-inline: 36px; }
  }
  @media(max-width: 980px) {
    .hq-private-system-footer .hq-system-footer__inner { width: min(100% - 28px, 1180px); }
  }
  @media(max-width: 760px) {
    .hq-public-system-footer { padding: 12px 10px 18px; }
    .hq-mega-footer { border-radius: 21px; }
    .hq-mega-footer__grid { grid-template-columns: 1fr 1fr; gap: 34px 22px; padding: 34px 24px 28px; }
    .hq-mega-footer__about { grid-column: 1/-1; display: block; }
    .hq-mega-footer__about > p { margin-bottom: 16px; }
    .hq-mega-footer__bottom { grid-template-columns: 1fr; padding: 17px 24px; text-align: center; }
    .hq-mega-footer__bottom nav { justify-content: center; }
    .hq-mega-footer__bottom > p { grid-row: 3; }
  }
  @media(max-width: 640px) {
    .hq-system-footer__inner { grid-template-columns: 1fr; width: min(100% - 28px, 1180px); padding: 23px 0; }
    .hq-system-footer__brand { justify-content: center; text-align: left; }
    .hq-system-footer__links { justify-content: center; }
    .hq-system-footer__copyright { padding-top: 13px; }
    .hq-mega-footer__grid { grid-template-columns: 1fr; padding: 30px 21px 25px; }
    .hq-mega-footer__about, .hq-mega-column { grid-column: auto; }
    .hq-mega-column { padding-top: 4px; border-top: 1px solid rgba(201, 255, 66, .09); }
    .hq-mega-column h3 { margin-top: 18px; }
    .hq-mega-footer__bottom { padding-inline: 18px; }
    .hq-mega-footer__bottom nav { gap: 14px; flex-wrap: wrap; }
  }
  
  
  
  
  
    @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

  :root {
    --bg: #06150e;
    --bg-soft: #0b2116;
    --panel: rgba(14, 40, 25, .78);
    --panel-strong: #102d1c;
    --line: rgba(157, 255, 70, .22);
    --lime: #c9ff42;
    --lime-2: #8fe52a;
    --text: #f4f9ec;
    --muted: #a6b8a5;
    --muted-2: #708676;
    --shadow: 0 24px 70px rgba(0,0,0,.28);
    --radius: 24px;
  }

  .hq-landing, .hq-landing * { box-sizing: border-box; }
  .hq-landing {
    color: var(--text);
    background:
      radial-gradient(circle at 12% 13%, rgba(157,255,70,.12), transparent 23rem),
      radial-gradient(circle at 86% 26%, rgba(38,149,78,.13), transparent 25rem),
      linear-gradient(180deg, #06150e 0%, #091b12 48%, #06140d 100%);
    font-family: 'DM Sans', sans-serif;
    min-height: 100vh;
    overflow: hidden;
  }
  .hq-landing a { color: inherit; text-decoration: none; }
  .hq-shell { width: min(1180px, calc(100% - 40px)); margin: auto; }
  .hq-nav {
    align-items: center; display: flex; justify-content: space-between;
    min-height: 78px; border-bottom: 1px solid rgba(201,255,66,.12);
  }
  .hq-brand { align-items: center; display: flex; gap: 11px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -.04em; font-size: 21px; }
  .hq-brand-mark { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 11px; background: var(--lime); color: #10240e; box-shadow: 0 0 28px rgba(201,255,66,.38); font-weight: 900; }
  .hq-brand span { color: var(--lime); }
  .hq-nav-links { display: flex; align-items: center; gap: 28px; color: var(--muted); font-size: 14px; }
  .hq-nav-links a:hover { color: var(--lime); }
  .hq-nav-actions { display: flex; gap: 10px; align-items: center; }
  .hq-btn { border: 1px solid var(--line); border-radius: 999px; padding: 12px 19px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; transition: .2s ease; cursor: pointer; }
  .hq-btn:hover { transform: translateY(-2px); border-color: var(--lime); }
  .hq-btn-ghost { color: var(--text); background: rgba(255,255,255,.02); }
  .hq-btn-primary { color: #11210c; background: var(--lime); border-color: var(--lime); box-shadow: 0 10px 26px rgba(201,255,66,.18); }
  .hq-btn-primary:hover { background: #dcff78; }
  .hq-mobile-toggle { display:none; background:none; border:0; color:var(--text); font-size:24px; }

  .hq-hero { min-height: 620px; display: grid; place-items: center; text-align: center; padding: 92px 0 70px; position: relative; }
  .hq-hero:before { content:''; position:absolute; width: 600px; height: 600px; border: 1px solid rgba(201,255,66,.08); border-radius:50%; box-shadow: 0 0 0 60px rgba(201,255,66,.025), 0 0 0 120px rgba(201,255,66,.018); pointer-events:none; }
  .hq-eyebrow { display: inline-flex; align-items:center; gap:8px; padding:8px 13px; border:1px solid var(--line); border-radius:999px; color:var(--lime); text-transform:uppercase; letter-spacing:.14em; font-size:11px; font-weight:700; position:relative; }
  .hq-eyebrow:before { content:''; width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 14px var(--lime); }
  .hq-hero h1 { max-width: 890px; margin: 22px auto 17px; font-family:'Space Grotesk',sans-serif; font-size: clamp(42px, 7vw, 82px); line-height: .98; letter-spacing:-.075em; position:relative; }
  .hq-highlight { color:var(--lime); }
  .hq-hero-copy { color:var(--muted); max-width: 660px; margin: 0 auto 30px; line-height:1.7; font-size:17px; position:relative; }
  .hq-hero-actions { display:flex; justify-content:center; gap:12px; position:relative; }
  .hq-proof { display:flex; justify-content:center; flex-wrap:wrap; gap:24px; margin-top:44px; color:var(--muted); font-size:13px; position:relative; }
  .hq-proof strong { color:var(--text); font-size:20px; display:block; margin-bottom:3px; }

  .hq-section { padding: 88px 0; }
  .hq-section-head { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:30px; }
  .hq-kicker { color:var(--lime); text-transform:uppercase; letter-spacing:.16em; font-size:11px; font-weight:700; margin-bottom:10px; }
  .hq-section h2 { font-family:'Space Grotesk',sans-serif; font-size:clamp(30px,4vw,53px); line-height:1.04; letter-spacing:-.06em; margin:0; }
  .hq-section-intro { max-width: 460px; color:var(--muted); line-height:1.7; margin:0; }

  .hq-services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  .hq-service-card { padding:22px; min-height:180px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(145deg, rgba(22,62,35,.68), rgba(7,23,14,.65)); transition:.25s; }
  .hq-service-card:hover { transform:translateY(-5px); border-color:rgba(201,255,66,.68); box-shadow:var(--shadow); }
  .hq-service-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background:#0d301e; border:1px solid var(--line); font-size:22px; margin-bottom:22px; }
  .hq-service-card h3 { margin:0 0 7px; font-family:'Space Grotesk',sans-serif; font-size:20px; }
  .hq-service-card p { color:var(--muted); margin:0; font-size:14px; line-height:1.6; }
  .hq-service-card.featured { background:linear-gradient(145deg, rgba(201,255,66,.95), rgba(95,167,27,.9)); color:#10200d; }
  .hq-service-card.featured p { color:#263e1e; }
  .hq-service-card.featured .hq-service-icon { background:rgba(255,255,255,.4); border-color:rgba(16,32,13,.2); }

  .hq-platforms { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
  .hq-platform { display:flex; align-items:center; gap:9px; padding:12px 15px; border:1px solid var(--line); background:rgba(9,31,18,.72); border-radius:14px; color:var(--muted); font-size:13px; }
  .hq-platform b { color:var(--text); font-weight:600; }
  .hq-platform.active { background:var(--lime); border-color:var(--lime); color:#17300f; }
  .hq-platform.active b { color:#17300f; }
  .hq-platform i { display:grid; place-items:center; width:23px; height:23px; border-radius:7px; background:#173721; color:var(--lime); font-style:normal; font-size:11px; }

  .hq-workflow { display:grid; grid-template-columns:1.05fr 1fr; gap:50px; align-items:center; }
  .hq-steps { display:grid; gap:14px; margin-top:28px; }
  .hq-step { display:flex; gap:17px; padding:17px; border:1px solid rgba(201,255,66,.14); background:rgba(11,34,20,.65); border-radius:18px; }
  .hq-step-no { flex:0 0 35px; height:35px; border-radius:11px; background:var(--lime); color:#16300e; display:grid; place-items:center; font-weight:800; }
  .hq-step h3 { margin:0 0 5px; font-size:16px; }
  .hq-step p { color:var(--muted); margin:0; font-size:13px; line-height:1.5; }
  .hq-dashboard { border:1px solid var(--line); border-radius:28px; padding:20px; background:linear-gradient(145deg, rgba(26,66,36,.9), rgba(6,21,13,.96)); box-shadow:var(--shadow); transform:rotate(1deg); }
  .hq-dash-top { display:flex; justify-content:space-between; color:var(--muted); font-size:12px; margin-bottom:19px; }
  .hq-chart { border-radius:18px; height:170px; padding:20px; background:linear-gradient(180deg, rgba(201,255,66,.12), rgba(201,255,66,0)); position:relative; overflow:hidden; }
  .hq-chart svg { width:100%; height:100%; }
  .hq-mini-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
  .hq-mini { background:rgba(255,255,255,.045); padding:13px; border-radius:14px; }
  .hq-mini small { color:var(--muted-2); display:block; font-size:10px; }
  .hq-mini strong { font-size:18px; display:block; margin-top:4px; }

  .hq-trust { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-top:30px; }
  .hq-trust-card { padding:24px 20px; border:1px solid var(--line); border-radius:20px; background:rgba(13,41,24,.58); }
  .hq-trust-card strong { display:block; color:var(--lime); font:700 34px 'Space Grotesk',sans-serif; letter-spacing:-.06em; }
  .hq-trust-card span { color:var(--muted); font-size:13px; }

  .hq-testimonials { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
  .hq-quote { padding:24px; border:1px solid var(--line); border-radius:22px; background:linear-gradient(145deg, rgba(17,52,29,.8), rgba(7,24,14,.8)); }
  .hq-stars { color:var(--lime); letter-spacing:2px; margin-bottom:16px; }
  .hq-quote p { color:#d6e2d3; line-height:1.7; font-size:14px; margin:0 0 22px; }
  .hq-person { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; }
  .hq-avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--lime); color:#17300f; font-weight:800; }

  .hq-faq-wrap { display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; align-items:start; }
  .hq-faq { border-top:1px solid var(--line); }
  .hq-faq details { border-bottom:1px solid var(--line); padding:19px 0; }
  .hq-faq summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:20px; font-weight:700; }
  .hq-faq summary::-webkit-details-marker { display:none; }
  .hq-faq summary:after { content:'+'; color:var(--lime); font-size:22px; font-weight:400; }
  .hq-faq details[open] summary:after { content:'−'; }
  .hq-faq details p { color:var(--muted); line-height:1.7; font-size:14px; margin:13px 28px 0 0; }

  /* ============================================================
     TOP LOGIN SECTION
     ============================================================ */
  .hq-login-section {
    padding: 22px 0 34px;
    position: relative;
  }

  .hq-login-section::before {
    content: '';
    position: absolute;
    width: 620px;
    height: 620px;
    left: -240px;
    top: -190px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,255,66,.10), transparent 68%);
    filter: blur(10px);
    pointer-events: none;
  }

  .hq-login-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.72fr) minmax(330px, .78fr);
    gap: 38px;
    align-items: center;
    width: min(1180px, calc(100% - 40px));
    min-height: 455px;
    padding: 18px 0 10px;
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
  }

  .hq-login-pitch {
    padding: 16px 0 18px;
    background: none;
    position: relative;
    z-index: 1;
  }

  .hq-login-pitch .hq-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    margin-bottom: 10px;
    border: 1px solid rgba(201,255,66,.20);
    border-radius: 999px;
    background: rgba(201,255,66,.055);
    color: #e5ff9b;
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
  }

  .hq-login-pitch .hq-kicker::before {
    content: '';
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 12px rgba(201,255,66,.7);
  }

  .hq-login-pitch h2 {
    max-width: 700px;
    margin: 7px 0 17px;
    color: #f7faF4;
    font: 700 clamp(38px, 4.7vw, 62px)/1.02 'Space Grotesk', sans-serif;
    letter-spacing: -.065em;
  }

  .hq-login-pitch h2 .hq-highlight {
    color: var(--lime);
  }

  .hq-login-pitch p {
    max-width: 690px;
    margin: 0 0 20px;
    color: #aebead;
    line-height: 1.58;
    font-size: 16px;
  }

  .hq-rate-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    position: relative;
    max-width: 100%;
    margin: 0 0 18px;
    padding: 9px 14px 9px 13px;
    border: 1px solid rgba(201,255,66,.18);
    border-left: 3px solid var(--lime);
    border-radius: 2px 8px 8px 2px;
    background: rgba(201,255,66,.045);
    color: #aab9aa;
    font-size: 12px;
  }

  .hq-rate-note strong {
    color: var(--lime);
    font-weight: 800;
  }

  .hq-rate-note span {
    color: #7f9282;
  }

  .hq-reference-actions {
    justify-content: flex-start;
    gap: 10px;
  }

  .hq-reference-actions .hq-btn {
    min-height: 41px;
    padding: 10px 19px;
    border-radius: 11px;
    font-size: 12px;
  }

  .hq-reference-actions .hq-btn-ghost {
    min-width: 109px;
    background: rgba(255,255,255,.035);
    border-color: rgba(201,255,66,.16);
  }

  .hq-reference-actions .hq-btn-primary {
    min-width: 181px;
    background: var(--lime);
    border-color: var(--lime);
    color: #12210d;
    box-shadow: 0 9px 26px rgba(201,255,66,.14);
  }

  .hq-form-panel {
    position: relative;
    padding: 25px 22px 21px;
    border: 1px solid rgba(201,255,66,.48);
    border-radius: 17px;
    background: rgba(18, 38, 23, .72);
    box-shadow: 0 18px 48px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.035);
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
  }

  .hq-form-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(201,255,66,.045), transparent 38%, rgba(255,255,255,.015));
    pointer-events: none;
  }

  .hq-form-panel > * {
    position: relative;
    z-index: 1;
  }

  .hq-form-panel h3 {
    margin: 0 0 4px;
    color: #f5f8f1;
    font: 700 25px/1.15 'Space Grotesk', sans-serif;
    letter-spacing: -.035em;
  }

  .hq-form-sub {
    color: #9cad9e;
    font-size: 12px;
    margin: 0 0 19px;
  }

  .hq-form-panel .form-group {
    position: relative;
    margin-bottom: 13px;
  }

  .hq-form-panel label {
    display: block;
    color: #d7e1d6;
    font-size: 11px;
    font-weight: 500;
    margin-bottom: 6px;
  }

  .hq-form-panel input:not([type=checkbox]) {
    width: 100%;
    height: 36px;
    border: 1px solid rgba(201,255,66,.18);
    border-radius: 8px;
    padding: 0 11px;
    background: rgba(5,20,10,.42);
    color: #f4f8ef;
    outline: 0;
    font-size: 12px;
    transition: .18s ease;
  }

  .hq-form-panel input:not([type=checkbox]):hover {
    border-color: rgba(201,255,66,.30);
  }

  .hq-form-panel input:not([type=checkbox]):focus {
    border-color: rgba(201,255,66,.72);
    box-shadow: 0 0 0 3px rgba(201,255,66,.075);
  }

  .hq-form-panel .form-group:has(#hq-password) {
    margin-bottom: 7px;
  }

  .hq-forgot {
    position: absolute;
    top: 0;
    right: 0;
    color: #d9ec9e;
    font-size: 10px;
    display: block;
    margin: 0;
  }

  .hq-forgot:hover {
    color: var(--lime);
  }

  .hq-remember {
    display: flex !important;
    align-items: center;
    gap: 6px;
    color: #a6b4a7 !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    margin: 1px 0 12px !important;
  }

  .hq-remember input {
    width: 12px;
    height: 12px;
    margin: 0;
    accent-color: var(--lime);
  }

  .hq-form-panel .hq-submit {
    width: 100%;
    height: 37px;
    margin-top: 0;
    border: 0;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
  }

  /* ============================================================
     ALERTS: ERROR & SUCCESS MESSAGES
     ============================================================ */
  .hq-form-panel .alert {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-radius: 9px;
    padding: 10px 14px;
    font-size: 12px;
    line-height: 1.45;
    margin-bottom: 14px;
    word-break: break-word;
  }

  .hq-form-panel .alert .alert-content {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .hq-form-panel .alert .alert-icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
  }

  .hq-form-panel .alert-danger {
    background: rgba(255, 68, 68, 0.12);
    border: 1px solid rgba(255, 90, 90, 0.35);
    color: #ff9b9b;
  }

  .hq-form-panel .alert-success {
    background: rgba(201, 255, 66, 0.12);
    border: 1px solid rgba(201, 255, 66, 0.4);
    color: #e2ff8d;
  }

  .hq-form-panel .alert .close {
    background: none;
    border: none;
    color: currentColor;
    font-size: 18px;
    line-height: 1;
    opacity: 0.65;
    cursor: pointer;
    padding: 0;
    margin-left: 6px;
    transition: opacity 0.15s ease;
  }

  .hq-form-panel .alert .close:hover {
    opacity: 1;
  }

  .hq-signup {
    text-align: center;
    color: #94a398;
    font-size: 11px;
    margin: 13px 0 0;
  }

  .hq-signup a {
    color: #d9ec9e;
    font-weight: 700;
  }

  .hq-signup a:hover {
    color: var(--lime);
  }

  .hq-google {
    margin-top: 14px;
    text-align: center;
  }

  .hq-google > * {
    max-width: 100%;
  }

  @media (max-width: 850px) {
    .hq-login-section { padding: 30px 0 45px; }
    .hq-login-card {
      grid-template-columns: 1fr;
      gap: 25px;
      min-height: 0;
    }
    .hq-login-pitch { padding: 18px 0 5px; }
    .hq-login-pitch h2 { max-width: 760px; }
    .hq-form-panel { max-width: 520px; width: 100%; margin: 0 auto; }
  }

  @media (max-width: 560px) {
    .hq-login-section { padding: 20px 0 35px; }
    .hq-login-card { width: min(100% - 28px, 1180px); }
    .hq-login-pitch h2 { font-size: 38px; }
    .hq-login-pitch p { font-size: 14px; }
    .hq-rate-note { display: flex; }
    .hq-reference-actions { flex-direction: row; align-items: stretch; }
    .hq-reference-actions .hq-btn { flex: 1; min-width: 0; }
    .hq-form-panel { padding: 22px 18px 19px; }
  }

  .hq-footer { border-top:1px solid rgba(201,255,66,.12); padding:28px 0; color:var(--muted-2); font-size:12px; }
  .hq-footer-inner { display:flex; justify-content:space-between; gap:20px; align-items:center; }
  .hq-footer-links { display:flex; gap:18px; }
  .hq-footer-links a:hover { color:var(--lime); }
  .hq-up { position:fixed; right:22px; bottom:22px; width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:var(--lime); color:#16300e; font-weight:900; box-shadow:0 10px 30px rgba(201,255,66,.2); }

  @media (max-width: 850px) {
    .hq-nav-links { display:none; }
    .hq-nav-actions .hq-btn-ghost { display:none; }
    .hq-mobile-toggle { display:block; }
    .hq-services-grid, .hq-testimonials { grid-template-columns:1fr 1fr; }
    .hq-workflow, .hq-faq-wrap, .hq-login-card { grid-template-columns:1fr; }
    .hq-login-pitch { padding:38px 28px; }
    .hq-form-panel { padding:28px; }
    .hq-faq-wrap { gap:35px; }
  }
  @media (max-width: 560px) {
    .hq-shell { width:min(100% - 28px, 1180px); }
    .hq-hero { padding:70px 0 45px; min-height:560px; }
    .hq-hero h1 { font-size:44px; }
    .hq-hero-copy { font-size:15px; }
    .hq-hero-actions { flex-direction:column; align-items:stretch; }
    .hq-proof { gap:15px; justify-content:space-between; }
    .hq-proof strong { font-size:17px; }
    .hq-section { padding:62px 0; }
    .hq-section-head { display:block; }
    .hq-section-intro { margin-top:16px; }
    .hq-services-grid, .hq-testimonials, .hq-trust { grid-template-columns:1fr; }
    .hq-platform { flex:1 1 calc(50% - 10px); }
    .hq-platform b { font-size:12px; }
    .hq-mini-grid { grid-template-columns:1fr; }
    .hq-footer-inner { align-items:flex-start; flex-direction:column; }
    .hq-footer-links { flex-wrap:wrap; }
  }

  /* --- Extra sections --- */
  .hqlg-stats { margin: 0 auto 10px; }
  .hqlg-stats-card {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(145deg, rgba(16,49,28,.55), rgba(7,24,14,.65));
  }
  .hqlg-stat { position: relative; padding: 26px 18px; text-align: center; }
  .hqlg-stat + .hqlg-stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 24%;
    width: 1px;
    height: 52%;
    background: rgba(201,255,66,.12);
  }
  .hqlg-stat strong {
    display: block;
    color: var(--lime);
    font: 700 clamp(28px, 3.4vw, 42px)/1 'Space Grotesk', sans-serif;
    letter-spacing: -.05em;
  }
  .hqlg-stat span {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .hqlg-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .hqlg-feature {
    position: relative;
    overflow: hidden;
    padding: 24px 22px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(13,41,24,.5);
    transition: .22s;
  }
  .hqlg-feature::after {
    content: '';
    position: absolute;
    top: -34px;
    right: -34px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rgba(201,255,66,.045);
  }
  .hqlg-feature:hover {
    transform: translateY(-4px);
    border-color: rgba(201,255,66,.6);
    box-shadow: var(--shadow);
  }
  .hqlg-feature-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 18px;
    border: 1px solid rgba(201,255,66,.22);
    border-radius: 14px;
    background: rgba(201,255,66,.08);
    color: var(--lime);
  }
  .hqlg-feature-icon svg { width: 23px; height: 23px; }
  .hqlg-feature h3 { margin: 0 0 7px; font-family: 'Space Grotesk', sans-serif; font-size: 18px; letter-spacing: -.02em; }
  .hqlg-feature p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }

  .hqlg-cta {
    position: relative;
    overflow: hidden;
    padding: clamp(42px, 6vw, 66px) clamp(22px, 5vw, 60px);
    border-radius: 28px;
    background: linear-gradient(135deg, #d4ff5e, #9aea28 55%, #6fc71c);
    text-align: center;
  }
  .hqlg-cta::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -90px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: rgba(255,255,255,.14);
  }
  .hqlg-cta::after {
    content: '';
    position: absolute;
    bottom: -140px;
    left: -80px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(14,31,11,.08);
  }
  .hqlg-cta > * { position: relative; z-index: 1; }
  .hqlg-cta-kicker { margin-bottom: 12px; color: #1c3a12; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
  .hqlg-cta h2 { max-width: 720px; margin: 0 auto 14px; color: #0e1f0b; font-family: 'Space Grotesk', sans-serif; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.02; letter-spacing: -.06em; }
  .hqlg-cta p { max-width: 560px; margin: 0 auto 26px; color: rgba(14,31,11,.74); font-size: 15px; line-height: 1.65; }
  .hqlg-cta-actions { display: flex; justify-content: center; gap: 10px; }
  .hqlg-cta .hq-btn { border-radius: 12px; }
  .hqlg-cta .hqlg-btn-dark { border-color: #0e1f0b; background: #0e1f0b; color: var(--lime); box-shadow: 0 12px 30px rgba(14,31,11,.25); }
  .hqlg-cta .hqlg-btn-dark:hover { background: #1a3313; border-color: #1a3313; }
  .hqlg-cta .hqlg-btn-line { border-color: rgba(14,31,11,.35); background: transparent; color: #0e1f0b; }
  .hqlg-cta .hqlg-btn-line:hover { border-color: #0e1f0b; }

  @media (max-width: 850px) {
    .hqlg-stats-card { grid-template-columns: 1fr 1fr; }
    .hqlg-stat:nth-child(3)::before { display: none; }
    .hqlg-stat:nth-child(n+3) { border-top: 1px solid rgba(201,255,66,.1); }
    .hqlg-features-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 560px) {
    .hqlg-features-grid { grid-template-columns: 1fr; }
    .hqlg-stat { padding: 20px 12px; }
    .hqlg-cta-actions { flex-direction: column; align-items: stretch; }
  }

  .hq-platform i { width: auto; height: auto; padding: 0; border-radius: 0; background: transparent; font-size: 0; }
  .hq-platform i svg { display: block; width: 16px; height: 16px; }
  .hq-platform--instagram { color: #e1306c; }
  .hq-platform--facebook { color: #1877f2; }
  .hq-platform--twitter { color: #ffffff; }
  .hq-platform--youtube { color: #ff0000; }
  .hq-platform--spotify { color: #1db954; }
  .hq-platform--tiktok { color: #fe2c55; }
  .hq-platform--telegram { color: #229ed9; }
  .hq-platform--soundcloud { color: #ff5500; }
  .hq-platform--linkedin { color: #0a66c2; }
  .hq-platform--pinterest { color: #e60023; }
  .hq-platform--snapchat { color: #fffc00; }
  .hq-platform--threads { color: #ffffff; }
  .hq-platform.active i svg { color: #17300f !important; }

  .hqlg-center-head { max-width: 780px; margin: 0 auto 34px; text-align: center; }
  .hqlg-center-head .hq-section-intro { margin: 16px auto 0; max-width: 620px; }

  .hqlg-featured {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: 40px;
    overflow: hidden;
    padding: clamp(26px, 4.4vw, 56px);
    border: 1px solid var(--line);
    border-radius: 30px;
    background: linear-gradient(145deg, rgba(22,62,35,.55), rgba(7,23,14,.72));
  }
  .hqlg-featured::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 92% 8%, rgba(225,48,108,.1), transparent 22rem);
    pointer-events: none;
  }
  .hqlg-featured-copy { position: relative; z-index: 1; }
  .hqlg-featured-copy h2 { margin: 0 0 15px; font-family: 'Space Grotesk', sans-serif; font-size: clamp(34px, 4.6vw, 58px); line-height: 1.02; letter-spacing: -.06em; }
  .hqlg-featured-copy p { max-width: 520px; margin: 0 0 14px; color: var(--muted); line-height: 1.7; font-size: 14.5px; }
  .hqlg-featured-tags { margin: 0 0 24px; color: var(--muted-2); font-size: 12px; letter-spacing: .02em; }
  .hqlg-featured-actions { display: flex; flex-wrap: wrap; gap: 10px; }
  .hqlg-featured-actions .hq-btn { border-radius: 12px; font-size: 13px; padding: 12px 18px; }
  .hqlg-featured-art { position: relative; min-height: 330px; }
  .hqlg-art-ring { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(201,255,66,.16); border-radius: 50%; transform: translate(-50%, -50%); }
  .hqlg-art-ring--1 { width: 190px; height: 190px; }
  .hqlg-art-ring--2 { width: 295px; height: 295px; border-color: rgba(201,255,66,.09); }
  .hqlg-art-ring--3 { width: 390px; height: 390px; border-color: rgba(201,255,66,.05); }

  .hqlg-art-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    border-radius: 28px;
    background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
    box-shadow: 0 18px 60px rgba(214,41,118,.38), 0 0 90px rgba(214,41,118,.2);
    transform: translate(-50%, -50%);
  }
  .hqlg-art-badge svg { width: 52px; height: 52px; }
  .hqlg-art-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    border: 1px solid rgba(201,255,66,.25);
    border-radius: 999px;
    background: rgba(9,31,18,.88);
    color: var(--text);
    font-size: 11.5px;
    font-weight: 700;
    box-shadow: 0 10px 26px rgba(0,0,0,.3);
  }
  .hqlg-art-chip i { color: var(--lime); font-style: normal; }
  .hqlg-art-chip--1 { top: 15%; right: 6%; }
  .hqlg-art-chip--2 { bottom: 16%; left: 4%; }
  .hqlg-art-chip--3 { top: 58%; right: 8%; }

  .hqlg-lookup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
  .hqlg-lookup {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    min-height: 235px;
    padding: 36px 26px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 26px;
    background: rgba(11,34,20,.55);
    text-align: center;
    transition: .22s;
  }
  .hqlg-lookup::after {
    content: '';
    position: absolute;
    top: -66px;
    right: -56px;
    width: 175px;
    height: 175px;
    border-radius: 50%;
    background: rgba(201,255,66,.085);
  }
  .hqlg-lookup:hover {
    transform: translateY(-4px);
    border-color: rgba(201,255,66,.55);
    box-shadow: var(--shadow);
  }
  .hqlg-lookup-logo { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; font: 700 24px/1 'Space Grotesk', sans-serif; letter-spacing: -.02em; }
  .hqlg-lookup-logo svg { display: block; }
  .hqlg-logo-google .g1 { color: #4285f4; }
  .hqlg-logo-google .g2 { color: #ea4335; }
  .hqlg-logo-google .g3 { color: #fbbc05; }
  .hqlg-logo-google .g4 { color: #4285f4; }
  .hqlg-logo-google .g5 { color: #34a853; }
  .hqlg-logo-google .g6 { color: #ea4335; }
  .hqlg-logo-trustpilot { color: #ffffff; }
  .hqlg-logo-facebook { color: #1877f2; font-size: 25px; }
  .hqlg-lookup-arrow { position: relative; z-index: 1; display: grid; place-items: center; color: var(--lime); transition: transform .18s ease; }
  .hqlg-lookup-arrow svg { width: 19px; height: 19px; }
  .hqlg-lookup:hover .hqlg-lookup-arrow { transform: translate(2px, -2px); }
  .hqlg-lookup-cap { position: relative; z-index: 1; margin: 0; color: var(--muted-2); font-size: 12px; letter-spacing: .03em; }

  .hqlg-faq-head { max-width: 720px; margin: 0 auto 34px; text-align: center; }
  .hqlg-faq-head .hq-section-intro { margin: 15px auto 0; max-width: 560px; }
  .hq-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; align-items: start; border-top: 0; }
  .hq-faq details {
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(11,34,20,.55);
    transition: border-color .18s ease, background .18s ease;
  }
  .hq-faq details:hover { border-color: rgba(201,255,66,.4); }
  .hq-faq details[open] { border-color: rgba(201,255,66,.5); background: rgba(17,53,29,.6); }
  .hq-faq summary { align-items: center; font-size: 14px; }
  .hq-faq summary:after {
    display: grid;
    place-items: center;
    flex: 0 0 29px;
    width: 29px;
    height: 29px;
    border: 1px solid rgba(201,255,66,.28);
    border-radius: 50%;
    background: rgba(201,255,66,.09);
    color: var(--lime);
    font-size: 17px;
    line-height: 1;
  }
  .hq-faq details p { margin: 12px 2px 0; font-size: 13px; }
  .hqlg-faq-more { margin: 28px 0 0; color: var(--muted); font-size: 13px; text-align: center; }
  .hqlg-faq-more a { color: var(--lime); font-weight: 700; }
  .hqlg-faq-more a:hover { text-decoration: underline; }

  @media (max-width: 850px) {
    .hqlg-featured { grid-template-columns: 1fr; gap: 26px; }
    .hqlg-featured-art { min-height: 290px; }
    .hqlg-lookup-grid { grid-template-columns: 1fr; }
    .hqlg-lookup { min-height: 200px; }
    .hq-faq { grid-template-columns: 1fr; }
  }
  @media (max-width: 560px) {
    .hqlg-featured { padding: 26px 20px; border-radius: 24px; }
    .hqlg-featured-art { min-height: 250px; }
    .hqlg-art-badge { width: 86px; height: 86px; border-radius: 22px; }
    .hqlg-art-badge svg { width: 42px; height: 42px; }
    .hqlg-art-ring--1 { width: 150px; height: 150px; }
    .hqlg-art-ring--2 { width: 215px; height: 215px; }
    .hqlg-art-ring--3 { width: 270px; height: 270px; }
    .hqlg-featured-actions { flex-direction: column; align-items: stretch; }
  }
  
  
  
  
  @import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

.hqmo-page, .hqmo-page * { box-sizing: border-box; }

.hqmo-page{
  position:relative;
  min-height:calc(100vh - 78px);
  padding:56px 20px 96px;
  color:#eaf5e6;
  font-family:'DM Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  overflow:hidden;
}

/* ambient glows */
.hqmo-glow{position:absolute;pointer-events:none;z-index:0;border-radius:50%;filter:blur(90px);}
.hqmo-glow--a{width:520px;height:520px;top:-180px;right:-140px;background:radial-gradient(circle,rgba(201,255,66,.14),transparent 65%);}
.hqmo-glow--b{width:460px;height:460px;bottom:-200px;left:-160px;background:radial-gradient(circle,rgba(64,190,120,.12),transparent 65%);}

.hqmo-wrap{position:relative;z-index:1;max-width:1160px;margin:0 auto;}

/* admin content notes */
.hqmo-note{
  margin:0 0 26px;
  padding:18px 22px;
  background:rgba(12,34,22,.72);
  border:1px solid rgba(201,255,66,.15);
  border-radius:18px;
  color:#cfe3cb;
  font-size:14.5px;
  line-height:1.65;
}
.hqmo-note--bottom{margin:26px 0 0;}
.hqmo-note a{color:#c9ff42;}
.hqmo-note :first-child{margin-top:0;}
.hqmo-note :last-child{margin-bottom:0;}

.hqmo-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:26px;align-items:start;}

/* ----- hero ----- */
.hqmo-hero{margin-bottom:22px;}
.hqmo-hero-icon{
  width:66px;height:66px;border-radius:20px;
  display:grid;place-items:center;
  background:linear-gradient(155deg,#d6ff6a,#96e42e);
  box-shadow:0 16px 36px rgba(160,255,60,.28), inset 0 1px 0 rgba(255,255,255,.5);
  margin-bottom:20px;
}
.hqmo-eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:#c9ff42;margin-bottom:10px;font-family:'Space Grotesk',sans-serif;
}
.hqmo-title{
  margin:0 0 12px;font-family:'Space Grotesk',sans-serif;
  font-size:clamp(32px,4.6vw,46px);font-weight:700;line-height:1.05;
  color:#f6fff2;letter-spacing:-.01em;
}
.hqmo-sub{margin:0;color:#9db4a2;font-size:15px;line-height:1.65;max-width:46ch;}

/* ----- format guide ----- */
.hqmo-guide{
  background:rgba(12,34,22,.72);
  border:1px solid rgba(201,255,66,.14);
  border-radius:22px;padding:24px;
}
.hqmo-guide-title{
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;
  color:#f0fbdf;margin-bottom:14px;
}
.hqmo-format{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px;}
.hqmo-chip{
  padding:7px 13px;border-radius:999px;font-size:13px;
  font-family:ui-monospace,'SF Mono','Cascadia Code',Consolas,monospace;font-weight:600;
}
.hqmo-chip--a{background:#c9ff42;color:#0a1a10;}
.hqmo-chip--b{border:1px solid rgba(201,255,66,.45);color:#c9ff42;background:rgba(201,255,66,.06);}
.hqmo-chip--c{border:1px solid rgba(255,255,255,.22);color:#e7f4e2;background:rgba(255,255,255,.05);}
.hqmo-pipe{color:#5f7a68;font-family:ui-monospace,Consolas,monospace;font-weight:700;}

.hqmo-example{
  background:#050f09;border:1px solid rgba(201,255,66,.14);
  border-radius:14px;padding:14px 16px;margin-bottom:18px;font-size:13px;
}
.hqmo-example-label{
  font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:#7c967f;margin-bottom:8px;
}
.hqmo-example code{
  font-family:ui-monospace,'SF Mono',Consolas,monospace;
  color:#cfe8c8;background:transparent;padding:0;font-size:12.8px;line-height:2;
  word-break:break-all;
}

.hqmo-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.hqmo-steps li{display:flex;gap:12px;align-items:flex-start;color:#a9c2ad;font-size:13.5px;line-height:1.55;}
.hqmo-steps li b{color:#c9ff42;font-family:ui-monospace,Consolas,monospace;}
.hqmo-steps li span{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(201,255,66,.12);border:1px solid rgba(201,255,66,.35);
  color:#c9ff42;font-size:11.5px;font-weight:700;font-family:'Space Grotesk',sans-serif;
  margin-top:1px;
}

/* ----- form card ----- */
.hqmo-card{
  background:linear-gradient(180deg,#0b2417,#081c11);
  border:1px solid rgba(201,255,66,.16);
  border-radius:24px;padding:28px 28px 30px;
  box-shadow:0 30px 60px rgba(0,0,0,.45);
}
.hqmo-card-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:20px;
}
.hqmo-card-head h2{
  margin:0;font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:20px;color:#f3ffee;
}
.hqmo-badge{
  flex:0 0 auto;padding:6px 12px;border-radius:999px;
  border:1px solid rgba(201,255,66,.4);background:rgba(201,255,66,.08);
  color:#d9ff7d;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  font-family:'Space Grotesk',sans-serif;
}

/* alerts */
.hqmo-alert{
  display:flex;align-items:flex-start;gap:12px;
  border-radius:14px;padding:14px 16px;margin-bottom:18px;
  font-size:14px;line-height:1.55;
}
.hqmo-alert svg{flex:0 0 auto;margin-top:2px;}
.hqmo-alert-body{flex:1 1 auto;}
.hqmo-alert--error{border:1px solid rgba(255,122,122,.38);background:rgba(255,90,90,.09);color:#ffc7c7;}
.hqmo-alert--success{border:1px solid rgba(201,255,66,.35);background:rgba(201,255,66,.09);color:#e3ffab;}
.hqmo-alert-close{
  flex:0 0 auto;margin:-4px -4px 0 4px;padding:4px 8px;
  background:none;border:none;color:inherit;font-size:19px;line-height:1;
  cursor:pointer;opacity:.65;transition:opacity .15s;font-family:inherit;
}
.hqmo-alert-close:hover{opacity:1;}

/* field */
.hqmo-label{display:block;margin-bottom:10px;font-weight:600;font-size:14px;color:#d9ecd4;}
.hqmo-textarea{
  display:block;width:100%;min-height:240px;resize:vertical;
  background:#050f09;border:1px solid rgba(201,255,66,.18);
  border-radius:16px;padding:18px;
  color:#e8ffd9;font-size:14.5px;line-height:1.7;
  font-family:ui-monospace,'SF Mono','Cascadia Code',Consolas,monospace;
  transition:border-color .2s,box-shadow .2s;
}
.hqmo-textarea::placeholder{color:#51705b;}
.hqmo-textarea:focus{outline:none;border-color:#c9ff42;box-shadow:0 0 0 4px rgba(201,255,66,.13);}
.hqmo-hint{margin-top:11px;font-size:12.5px;color:#8ba491;line-height:1.6;}
.hqmo-hint b{color:#c9ff42;font-family:ui-monospace,Consolas,monospace;font-weight:600;}

/* submit */
.hqmo-submit{
  margin-top:24px;width:100%;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 22px;border:none;border-radius:16px;
  background:linear-gradient(135deg,#d4ff5f,#a5ef2e);
  color:#0a1a10;font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:16px;letter-spacing:.02em;cursor:pointer;
  box-shadow:0 14px 30px rgba(160,255,60,.22);
  transition:transform .18s,box-shadow .18s;
}
.hqmo-submit:hover{transform:translateY(-2px);box-shadow:0 20px 38px rgba(160,255,60,.3);}
.hqmo-submit:active{transform:translateY(0);}
.hqmo-submit-arrow{transition:transform .18s;}
.hqmo-submit:hover .hqmo-submit-arrow{transform:translateX(4px);}

/* RTL alert kept from original template */
.rtl-alert{direction:rtl;text-align:right;}

/* ----- responsive ----- */
@media(max-width:980px){
  .hqmo-page{padding:42px 18px 84px;}
  .hqmo-grid{grid-template-columns:1fr;}
  .hqmo-hero{text-align:center;}
  .hqmo-hero-icon{margin:0 auto 18px;}
  .hqmo-sub{margin-left:auto;margin-right:auto;}
}
@media(max-width:640px){
  .hqmo-page{padding:32px 14px 72px;}
  .hqmo-card{padding:22px 18px 24px;border-radius:20px;}
  .hqmo-guide{padding:20px 18px;}
  .hqmo-textarea{min-height:180px;font-size:13.5px;}
  .hqmo-title{font-size:30px;}
  .hqmo-submit{font-size:15px;padding:15px 18px;}
}
@media(max-width:390px){
  .hqmo-chip{font-size:11.5px;padding:6px 10px;}
  .hqmo-hero-icon{width:56px;height:56px;border-radius:17px;}
  .hqmo-card-head{flex-direction:column;align-items:flex-start;gap:10px;}
}





:root {
    --hqvt-bg: #06150e;
    --hqvt-soft: #0a1d13;
    --hqvt-card: #0e2b1a;
    --hqvt-line: rgba(201, 255, 66, .18);
    --hqvt-line2: rgba(201, 255, 66, .48);
    --hqvt-lime: #c9ff42;
    --hqvt-text: #f4f9ec;
    --hqvt-muted: #a6b8a5;
    --hqvt-muted2: #708676;
    --hqvt-shadow: 0 22px 60px rgba(0, 0, 0, .27)
}

.hqvt-page,
.hqvt-page * {
    box-sizing: border-box
}

.hqvt-page {
    min-height: calc(100vh - 78px);
    padding: 28px clamp(14px, 2.4vw, 34px) 60px;
    overflow: hidden;
    color: var(--hqvt-text);
    background: radial-gradient(circle at 8% 0, rgba(157, 255, 70, .09), transparent 28rem), radial-gradient(circle at 94% 20%, rgba(38, 149, 78, .09), transparent 30rem), linear-gradient(180deg, var(--hqvt-bg), var(--hqvt-soft) 50%, var(--hqvt-bg));
    font-family: 'DM Sans', sans-serif
}

.hqvt-page ::selection {
    background: rgba(201, 255, 66, .25)
}

.hqvt-container {
    width: 100%;
    max-width: 860px;
    margin: auto
}

/* ================= BACK LINK ================= */

.hqvt-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 8px 14px;
    border: 1px solid var(--hqvt-line);
    border-radius: 999px;
    background: rgba(16, 49, 28, .6);
    color: var(--hqvt-muted);
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none;
    transition: .18s
}

.hqvt-back svg {
    width: 14px;
    height: 14px;
    transition: .18s
}

.hqvt-back:hover {
    border-color: var(--hqvt-line2);
    color: var(--hqvt-lime);
    transform: translateY(-1px)
}

.hqvt-back:hover svg {
    transform: translateX(-2px)
}

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

.hqvt-page .alert {
    position: relative !important;
    margin: 0 0 16px !important;
    padding: 14px 42px 14px 14px !important;
    border-radius: 14px !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    animation: hqvtFadeIn .3s ease-out
}

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

.hqvt-page .alert-success {
    border: 1px solid rgba(201, 255, 66, .35) !important;
    background: linear-gradient(145deg, rgba(14, 43, 24, .95), rgba(6, 25, 13, .98)) !important;
    color: #d8ffb0 !important
}

.hqvt-page .alert-danger {
    border: 1px solid rgba(255, 99, 99, .32) !important;
    background: linear-gradient(145deg, rgba(40, 12, 12, .92), rgba(22, 6, 6, .96)) !important;
    color: #ffd8d8 !important
}

.hqvt-page .alert .close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    display: grid !important;
    place-items: center !important;
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, .05) !important;
    color: inherit !important;
    font-size: 14px !important;
    line-height: 1 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    cursor: pointer !important;
    transition: .18s
}

.hqvt-page .alert .close:hover {
    background: rgba(255, 255, 255, .15) !important
}

/* ================= TICKET CARD ================= */

.hqvt-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--hqvt-line);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(16, 49, 28, .92), rgba(7, 24, 14, .95));
    box-shadow: var(--hqvt-shadow)
}

.hqvt-ticket-head {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 19px 20px;
    border-bottom: 1px solid var(--hqvt-line);
    background: rgba(255, 255, 255, .015)
}

.hqtk-head-icon,
.hqvt-head-icon {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--hqvt-line);
    border-radius: 13px;
    background: rgba(201, 255, 66, .08);
    color: var(--hqvt-lime)
}

.hqvt-head-icon svg {
    width: 22px;
    height: 22px
}

.hqvt-head-copy {
    min-width: 0
}

.hqvt-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--hqvt-lime);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase
}

.hqvt-head-copy h1 {
    margin: 0;
    color: var(--hqvt-text);
    font: 700 clamp(15px, 1.9vw, 19px)/1.35 'Space Grotesk', sans-serif;
    letter-spacing: -.02em;
    overflow-wrap: anywhere
}

.hqvt-closed-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 7px 12px;
    border: 1px solid rgba(255, 143, 130, .4);
    border-radius: 999px;
    background: rgba(255, 143, 130, .08);
    color: #ff9d95;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .03em;
    white-space: nowrap
}

.hqvt-closed-badge svg {
    width: 12px;
    height: 12px
}

/* ================= CHAT AREA ================= */

.hqvt-chat {
    padding: 20px;
}

.hqvt-msg {
    display: flex;
    margin: 0 0 14px
}

.hqvt-msg--user {
    justify-content: flex-end
}

.hqvt-bubble {
    max-width: min(78%, 620px);
    min-width: 130px;
    padding: 12px 15px 9px;
    border: 1px solid rgba(201, 255, 66, .14);
    border-radius: 16px 16px 16px 6px;
    background: rgba(17, 53, 29, .78);
    animation: hqvtRise .25s ease-out
}

.hqvt-msg--user .hqvt-bubble {
    border-color: rgba(201, 255, 66, .32);
    border-radius: 16px 16px 6px 16px;
    background: linear-gradient(135deg, rgba(201, 255, 66, .14), rgba(201, 255, 66, .05))
}

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

.hqvt-bubble-text {
    color: #e9f2e6;
    font-size: 12.5px;
    line-height: 1.75;
    white-space: pre-wrap;
    overflow-wrap: anywhere
}

.hqvt-msg--user .hqvt-bubble-text {
    color: #f2ffd9
}

.hqvt-bubble-text b,
.hqvt-bubble-text strong {
    color: var(--hqvt-lime)
}

.hqvt-bubble-text a {
    color: var(--hqvt-lime);
    text-decoration: underline
}

.hqvt-bubble-image {
    margin-top: 9px
}

.hqvt-bubble-image img {
    display: block;
    border: 1px solid rgba(201, 255, 66, .2);
    border-radius: 11px;
    object-fit: cover
}

.hqvt-bubble-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 7px
}

.hqvt-msg--user .hqvt-bubble-meta {
    flex-direction: row-reverse
}

.hqvt-bubble-name {
    color: var(--hqvt-lime);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .03em
}

.hqvt-bubble-date {
    color: var(--hqvt-muted2);
    font-size: 9.5px;
    white-space: nowrap
}

/* ================= REPLY FORM ================= */

.hqvt-reply {
    padding: 17px 20px 20px;
    border-top: 1px solid var(--hqvt-line);
    background: rgba(255, 255, 255, .015)
}

.hqvt-reply-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 13px;
    color: #dce7d9;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase
}

.hqvt-reply-title svg {
    width: 15px;
    height: 15px;
    color: var(--hqvt-lime)
}

.hqvt-page .form-group {
    margin: 0 0 14px
}

.hqvt-page .control-label {
    display: block;
    margin: 0 0 7px;
    color: #dce7d9;
    font-size: 12px;
    font-weight: 700
}

.hqvt-page .form-control {
    display: block;
    width: 100%;
    min-height: 47px;
    padding: 11px 13px;
    border: 1px solid rgba(201, 255, 66, .18);
    border-radius: 11px;
    background: rgba(3, 18, 9, .5);
    color: var(--hqvt-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
    outline: 0;
    font: 400 13px 'DM Sans', sans-serif;
    transition: .18s
}

.hqvt-page textarea.form-control {
    min-height: 115px;
    resize: vertical;
    line-height: 1.7
}

.hqvt-page .form-control:focus {
    border-color: rgba(201, 255, 66, .68);
    box-shadow: 0 0 0 3px rgba(201, 255, 66, .075)
}

.hqvt-page .form-control::placeholder {
    color: var(--hqvt-muted2)
}

.hqvt-page #previewImage {
    border: 1px solid rgba(201, 255, 66, .2);
    border-radius: 11px;
    object-fit: cover
}

.hqvt-page .btn-big-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 48px;
    padding: 12px 18px;
    border: 1px solid var(--hqvt-lime);
    border-radius: 11px;
    background: linear-gradient(135deg, var(--hqvt-lime), #a6ef2e);
    color: #10200d;
    box-shadow: 0 12px 28px rgba(201, 255, 66, .16);
    font: 800 14px 'DM Sans', sans-serif;
    cursor: pointer;
    transition: .2s
}

.hqvt-page .btn-big-primary:hover {
    transform: translateY(-2px);
    background: #dcff78;
    box-shadow: 0 16px 34px rgba(201, 255, 66, .23)
}

/* ================= RESPONSIVE ================= */

@media(max-width:640px) {
    .hqvt-page {
        padding: 16px 10px 42px
    }
    .hqvt-ticket-head {
        flex-wrap: wrap;
        padding: 14px
    }
    .hqvt-closed-badge {
        margin-left: 0
    }
    .hqvt-chat {
        padding: 14px
    }
    .hqvt-bubble {
        max-width: 92%
    }
    .hqvt-reply {
        padding: 14px
    }
}





:root{--hqo-bg:#06150e;--hqo-soft:#0a1d13;--hqo-card:#0e2b1a;--hqo-line:rgba(201,255,66,.18);--hqo-line2:rgba(201,255,66,.48);--hqo-lime:#c9ff42;--hqo-text:#f4f9ec;--hqo-muted:#a6b8a5;--hqo-muted2:#708676;--hqo-shadow:0 22px 60px rgba(0,0,0,.27)}
.hqo-page,.hqo-page *{box-sizing:border-box}.hqo-page{min-height:calc(100vh - 78px);padding:28px clamp(14px,2.4vw,34px) 60px;overflow:hidden;color:var(--hqo-text);background:radial-gradient(circle at 8% 0,rgba(157,255,70,.09),transparent 28rem),radial-gradient(circle at 94% 20%,rgba(38,149,78,.09),transparent 30rem),linear-gradient(180deg,var(--hqo-bg),var(--hqo-soft) 50%,var(--hqo-bg));font-family:'DM Sans',sans-serif}.hqo-container{width:100%;max-width:1440px;margin:auto}
.hqo-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);align-items:center;gap:30px;min-height:260px;margin-bottom:20px;padding:30px 34px;overflow:hidden;border:1px solid var(--hqo-line);border-radius:22px;background:radial-gradient(circle at 85% 20%,rgba(201,255,66,.10),transparent 20rem),linear-gradient(145deg,rgba(20,58,33,.9),rgba(8,27,16,.94));box-shadow:var(--hqo-shadow)}.hqo-hero:before{content:'';position:absolute;left:-100px;bottom:-170px;width:340px;height:340px;border:1px solid rgba(201,255,66,.06);border-radius:50%;box-shadow:0 0 0 45px rgba(201,255,66,.018),0 0 0 90px rgba(201,255,66,.012)}.hqo-hero-copy{position:relative;z-index:2;min-width:0}.hqo-kicker{display:flex;align-items:center;gap:7px;margin-bottom:10px;color:var(--hqo-lime);font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.hqo-kicker:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--hqo-lime);box-shadow:0 0 12px var(--hqo-lime)}.hqo-hero h1{margin:0;color:var(--hqo-text);font:700 clamp(34px,4vw,52px)/1.04 'Space Grotesk',sans-serif;letter-spacing:-.06em}.hqo-hero h1 span{color:var(--hqo-lime)}.hqo-hero p{max-width:620px;margin:13px 0 0;color:var(--hqo-muted);font-size:15px;line-height:1.7}.hqo-new-order{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:45px;margin-top:20px;padding:10px 17px;border:1px solid var(--hqo-lime);border-radius:12px;background:var(--hqo-lime);color:#12210d!important;box-shadow:0 10px 26px rgba(201,255,66,.15);font-size:13px;font-weight:800;text-decoration:none!important;white-space:nowrap;transition:.2s}.hqo-new-order svg{width:18px;height:18px}.hqo-new-order:hover{transform:translateY(-2px);background:#dcff78}.hqo-hero-art{position:relative;z-index:1;width:100%;max-width:420px;margin-left:auto}.hqo-hero-art svg{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.24))}
.hqo-card{border:1px solid var(--hqo-line);border-radius:20px;background:linear-gradient(145deg,rgba(16,49,28,.92),rgba(7,24,14,.96));box-shadow:var(--hqo-shadow)}.hqo-toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,360px);align-items:center;gap:15px;padding:16px;border-bottom:1px solid var(--hqo-line)}.hqo-tabs-wrap{min-width:0;overflow-x:auto;scrollbar-width:none}.hqo-tabs-wrap::-webkit-scrollbar{display:none}.hqo-tabs{display:flex;align-items:center;gap:7px;width:max-content;margin:0;padding:0;list-style:none}.hqo-tab{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 13px;border:1px solid rgba(201,255,66,.12);border-radius:10px;background:rgba(201,255,66,.025);color:var(--hqo-muted)!important;font-size:13px;font-weight:700;text-decoration:none!important;white-space:nowrap;transition:.18s}.hqo-tab:hover{border-color:rgba(201,255,66,.34);color:var(--hqo-text)!important}.hqo-tab.is-active{border-color:var(--hqo-lime);background:rgba(201,255,66,.12);color:var(--hqo-lime)!important;box-shadow:inset 0 0 18px rgba(201,255,66,.04)}
.hqo-search{position:relative}.hqo-search input{display:block;width:100%;height:43px;padding:10px 47px 10px 13px;border:1px solid rgba(201,255,66,.18);border-radius:11px;background:rgba(3,18,9,.55);color:var(--hqo-text);outline:0;font:500 14px 'DM Sans',sans-serif;transition:.18s}.hqo-search input::placeholder{color:var(--hqo-muted2)}.hqo-search input:focus{border-color:rgba(201,255,66,.65);box-shadow:0 0 0 3px rgba(201,255,66,.075)}.hqo-search button{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:35px;height:35px;padding:0;border:0;border-radius:9px;background:rgba(201,255,66,.1);color:var(--hqo-lime);cursor:pointer}.hqo-search button:hover{background:var(--hqo-lime);color:#12210d}.hqo-search svg{width:17px;height:17px}
.hqo-table-wrap{width:100%;overflow-x:auto}.hqo-table{width:100%;min-width:1320px;border-collapse:separate;border-spacing:0}.hqo-table th{padding:16px 13px;border-bottom:1px solid var(--hqo-line);background:rgba(201,255,66,.035);color:#9bad9a;font-size:11px;font-weight:800;letter-spacing:.07em;text-align:left;text-transform:uppercase;white-space:nowrap}.hqo-table td{padding:16px 13px;border-bottom:1px solid rgba(201,255,66,.075);color:#e0e9de;font-size:13px;line-height:1.55;vertical-align:middle}.hqo-table tbody tr{transition:.18s}.hqo-table tbody tr:hover{background:rgba(201,255,66,.035)}.hqo-table tbody tr:last-child td{border-bottom:0}.hqo-nowrap{white-space:nowrap}.hqo-id-line{display:flex;align-items:center;gap:6px;color:var(--hqo-lime);font-weight:800}.hqo-copy{display:grid;place-items:center;width:24px;height:24px;padding:0;border:1px solid rgba(201,255,66,.15);border-radius:7px;background:rgba(201,255,66,.05);color:var(--hqo-muted);cursor:pointer}.hqo-copy:hover{border-color:var(--hqo-lime);color:var(--hqo-lime)}.hqo-copy svg{width:13px;height:13px}.hqo-api{display:inline-flex;margin-top:5px;padding:3px 6px;border-radius:6px;background:rgba(54,162,255,.12);color:#75c0ff;font-size:8px;font-weight:800;text-transform:uppercase}.hqo-date span{display:block;white-space:nowrap}.hqo-date span+span{margin-top:3px;color:var(--hqo-muted2);font-size:11px}.hqo-link{display:block;max-width:220px;overflow:hidden;color:#b7d99f!important;text-decoration:none!important;text-overflow:ellipsis;white-space:nowrap}.hqo-link:hover{color:var(--hqo-lime)!important;text-decoration:underline!important}.hqo-service{min-width:220px;max-width:300px}.hqo-service-id{display:inline-flex;margin-right:5px;padding:3px 6px;border-radius:6px;background:rgba(201,255,66,.1);color:var(--hqo-lime)!important;font-size:11px;font-weight:800;text-decoration:none!important}.hqo-service-name{color:#dce7d9}.hqo-status{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid rgba(166,184,165,.2);border-radius:999px;background:rgba(166,184,165,.08);color:#cad5c8;font-size:11px;font-weight:800;white-space:nowrap}.hqo-status:before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}.hqo-status--completed{border-color:rgba(126,245,155,.25);background:rgba(126,245,155,.08);color:#7ef59b}.hqo-status--pending{border-color:rgba(255,202,74,.25);background:rgba(255,202,74,.08);color:#ffca4a}.hqo-status--inprogress,.hqo-status--in-progress,.hqo-status--processing{border-color:rgba(83,181,255,.25);background:rgba(83,181,255,.08);color:#70c4ff}.hqo-status--partial{border-color:rgba(190,126,255,.25);background:rgba(190,126,255,.08);color:#c58aff}.hqo-status--canceled,.hqo-status--cancelled{border-color:rgba(255,114,105,.25);background:rgba(255,114,105,.08);color:#ff8f82}.hqo-final{display:flex;align-items:center;gap:7px;white-space:nowrap}.hqo-reorder,.hqo-action{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:29px;padding:5px 8px;border:1px solid rgba(201,255,66,.21);border-radius:8px;background:rgba(201,255,66,.07);color:var(--hqo-lime)!important;font-size:11px;font-weight:800;text-decoration:none!important;white-space:nowrap;transition:.18s}.hqo-reorder:hover,.hqo-action:hover{border-color:var(--hqo-lime);background:var(--hqo-lime);color:#12210d!important}.hqo-reorder svg{width:12px;height:12px}.hqo-actions{display:flex;align-items:center;gap:6px}.hqo-action--warning{border-color:rgba(255,202,74,.28);background:rgba(255,202,74,.08);color:#ffca4a!important}.hqo-action--danger{border-color:rgba(255,114,105,.28);background:rgba(255,114,105,.08);color:#ff8f82!important}.hqo-action--disabled{border-color:rgba(166,184,165,.15);background:rgba(166,184,165,.06);color:var(--hqo-muted)!important;cursor:default}.hqo-empty{padding:55px 20px!important;text-align:center!important;color:var(--hqo-muted)!important}.hqo-empty strong{display:block;margin-bottom:5px;color:var(--hqo-text);font-size:14px}
.hqo-pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin:0;padding:18px;border-top:1px solid var(--hqo-line);list-style:none}.hqo-page-link{display:grid;place-items:center;min-width:34px;height:34px;padding:5px 9px;border:1px solid rgba(201,255,66,.14);border-radius:9px;background:rgba(201,255,66,.04);color:var(--hqo-muted)!important;font-size:11px;font-weight:800;text-decoration:none!important}.hqo-page-link:hover,.hqo-pagination li.is-active .hqo-page-link{border-color:var(--hqo-lime);background:rgba(201,255,66,.13);color:var(--hqo-lime)!important}.hqo-content{margin-top:18px;padding:20px;border:1px solid var(--hqo-line);border-radius:16px;background:rgba(14,43,26,.75);color:var(--hqo-muted);font-size:13px;line-height:1.75}.hqo-toast{position:fixed;z-index:100000;right:22px;bottom:22px;padding:11px 15px;border:1px solid rgba(201,255,66,.35);border-radius:11px;background:#102d1c;color:var(--hqo-lime);box-shadow:var(--hqo-shadow);font-size:11px;font-weight:800;animation:hqo-in .2s ease}@keyframes hqo-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:980px){.hqo-page{padding-top:20px}.hqo-toolbar{grid-template-columns:1fr}.hqo-search{max-width:none}}
@media(max-width:700px){.hqo-page{padding:14px 10px 42px}.hqo-hero{grid-template-columns:1fr;gap:12px;min-height:0;padding:23px 19px;border-radius:17px}.hqo-hero h1{font-size:34px}.hqo-hero p{font-size:14px;line-height:1.65}.hqo-new-order{min-height:43px;margin-top:16px;font-size:12px}.hqo-hero-art{width:min(100%,300px);margin:0 auto -6px}.hqo-card{border-radius:16px}.hqo-toolbar{padding:12px}.hqo-tabs{gap:6px}.hqo-tab{min-height:38px;padding:8px 12px;font-size:12px}.hqo-table-wrap{width:100%;padding:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-color:rgba(201,255,66,.35) rgba(255,255,255,.03);scrollbar-width:thin}.hqo-table-wrap::-webkit-scrollbar{height:9px}.hqo-table-wrap::-webkit-scrollbar-track{background:rgba(255,255,255,.03)}.hqo-table-wrap::-webkit-scrollbar-thumb{border:2px solid #092016;border-radius:10px;background:rgba(201,255,66,.38)}.hqo-table{display:table;width:100%;min-width:1180px}.hqo-table thead{display:table-header-group}.hqo-table tbody{display:table-row-group}.hqo-table tr{display:table-row;border:0;border-radius:0;background:transparent}.hqo-table th{padding:14px 11px;font-size:10.5px}.hqo-table td{display:table-cell;width:auto;padding:14px 11px;border-bottom:1px solid rgba(201,255,66,.075);font-size:12.5px;text-align:left;vertical-align:middle}.hqo-table td:before{display:none;content:none}.hqo-table th:first-child,.hqo-table td:first-child{position:sticky;left:0;z-index:3;background:#0c2918;box-shadow:7px 0 12px rgba(0,0,0,.14)}.hqo-table th:first-child{z-index:4;background:#12321e}.hqo-link{max-width:190px}.hqo-service{min-width:210px}.hqo-status{font-size:10px}.hqo-reorder,.hqo-action{font-size:10px}.hqo-pagination{padding:14px 8px;flex-wrap:wrap}.hqo-content{padding:15px;font-size:13px}}
@media(max-width:420px){.hqo-page{padding-inline:7px}.hqo-hero{padding:20px 16px}.hqo-hero h1{font-size:30px}.hqo-hero p{font-size:13px}.hqo-hero-art{width:260px}.hqo-toolbar{padding:10px}.hqo-table{min-width:1120px}.hqo-table th{font-size:10px}.hqo-table td{font-size:12px}.hqo-page-link{min-width:31px;height:31px}.hqo-status{font-size:9.5px}}

/* =========================================================
   HQ ORDERS — SAFETY FIXES (appended; original rules untouched)
   ========================================================= */

/* 1) Keyboard focus rings — visible only when tabbing, no mouse change */
.hqo-tab:focus-visible,
.hqo-link:focus-visible,
.hqo-service-id:focus-visible,
.hqo-reorder:focus-visible,
.hqo-action:focus-visible,
.hqo-page-link:focus-visible,
.hqo-new-order:focus-visible {
    outline: 2px solid var(--hqo-lime);
    outline-offset: 2px
}

.hqo-copy:focus-visible,
.hqo-search button:focus-visible {
    outline: 2px solid var(--hqo-lime);
    outline-offset: 2px
}

/* 2) Colour fallbacks for API statuses outside the main five
      (unknown statuses still default to the neutral grey pill) */
.hqo-status--fail,
.hqo-status--error {
    border-color: rgba(255,114,105,.25);
    background: rgba(255,114,105,.08);
    color: #ff8f82
}

.hqo-status--awaiting,
.hqo-status--awaiting-payment {
    border-color: rgba(83,181,255,.25);
    background: rgba(83,181,255,.08);
    color: #70c4ff
}









:root {
    --hqre-bg: #06150e;
    --hqre-soft: #0a1d13;
    --hqre-card: #0e2b1a;
    --hqre-line: rgba(201, 255, 66, .18);
    --hqre-line2: rgba(201, 255, 66, .48);
    --hqre-lime: #c9ff42;
    --hqre-text: #f4f9ec;
    --hqre-muted: #a6b8a5;
    --hqre-muted2: #708676;
    --hqre-shadow: 0 22px 60px rgba(0, 0, 0, .27)
}

.hqre-page,
.hqre-page * {
    box-sizing: border-box
}

.hqre-page {
    min-height: calc(100vh - 78px);
    padding: 28px clamp(14px, 2.4vw, 34px) 60px;
    overflow: hidden;
    color: var(--hqre-text);
    background: radial-gradient(circle at 8% 0, rgba(157, 255, 70, .09), transparent 28rem), radial-gradient(circle at 94% 20%, rgba(38, 149, 78, .09), transparent 30rem), linear-gradient(180deg, var(--hqre-bg), var(--hqre-soft) 50%, var(--hqre-bg));
    font-family: 'DM Sans', sans-serif
}

.hqre-page ::selection {
    background: rgba(201, 255, 66, .25)
}

.hqre-container {
    width: 100%;
    max-width: 1100px;
    margin: auto
}

/* ================= PAGE HEAD ================= */

.hqre-head {
    margin-bottom: 16px
}

.hqre-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--hqre-lime);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase
}

.hqre-head h1 {
    margin: 0 0 5px;
    color: var(--hqre-text);
    font: 700 clamp(23px, 2.6vw, 29px)/1.15 'Space Grotesk', sans-serif;
    letter-spacing: -.045em
}

.hqre-head p {
    margin: 0;
    color: var(--hqre-muted);
    font-size: 12px;
    line-height: 1.6
}

/* ================= NOTES + ALERTS ================= */

.hqre-note {
    margin: 0 0 16px;
    padding: 15px 16px;
    border: 1px solid var(--hqre-line);
    border-radius: 15px;
    background: rgba(201, 255, 66, .045);
    color: #d1ded0;
    font-size: 12.5px;
    line-height: 1.75;
    overflow-wrap: anywhere
}

.hqre-note a {
    color: var(--hqre-lime)
}

.hqre-note--bottom {
    margin: 16px 0 0
}

.hqre-page .alert {
    position: relative !important;
    margin: 0 0 16px !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    animation: hqreFadeIn .3s ease-out
}

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

.hqre-page .alert-danger {
    border: 1px solid rgba(255, 99, 99, .32) !important;
    background: linear-gradient(145deg, rgba(40, 12, 12, .92), rgba(22, 6, 6, .96)) !important;
    color: #ffd8d8 !important
}

.hqre-page .alert-success {
    border: 1px solid rgba(201, 255, 66, .35) !important;
    background: linear-gradient(145deg, rgba(14, 43, 24, .95), rgba(6, 25, 13, .98)) !important;
    color: #d8ffb0 !important
}

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

.hqre-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(150px, .7fr) minmax(150px, .7fr);
    gap: 13px;
    margin-bottom: 16px
}

.hqre-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    min-height: 104px;
    padding: 17px;
    overflow: hidden;
    border: 1px solid var(--hqre-line);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(20, 58, 33, .86), rgba(8, 27, 16, .9));
    transition: .2s
}

.hqre-stat:hover {
    transform: translateY(-3px);
    border-color: var(--hqre-line2);
    box-shadow: var(--hqre-shadow)
}

.hqre-stat--accent {
    border-color: rgba(201, 255, 66, .38);
    background: linear-gradient(145deg, rgba(41, 82, 37, .92), rgba(12, 43, 23, .92))
}

.hqre-stat-label {
    display: block;
    color: var(--hqre-muted);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase
}

.hqre-stat-value {
    display: block;
    color: var(--hqre-lime);
    font: 700 clamp(20px, 2.2vw, 27px)/1.1 'Space Grotesk', sans-serif;
    letter-spacing: -.035em
}

/* Referral link bar */

.hqre-page .affiliate-link-box {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 7px 7px 13px;
    border: 1px solid rgba(201, 255, 66, .22);
    border-radius: 11px;
    background: rgba(3, 18, 9, .55)
}

.hqre-page .affiliate-link-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--hqre-lime);
    font: 600 12px 'Space Grotesk', sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap
}

.hqre-page .affiliate-copy {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(201, 255, 66, .3);
    border-radius: 9px;
    background: rgba(201, 255, 66, .09);
    color: var(--hqre-lime);
    cursor: pointer;
    transition: .18s
}

.hqre-page .affiliate-copy:hover {
    background: var(--hqre-lime);
    color: #12210d;
    transform: translateY(-1px)
}

.hqre-page .affiliate-copy span {
    font-size: 12px;
    pointer-events: none
}

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

.hqre-card {
    min-width: 0;
    margin-bottom: 16px;
    padding: 20px;
    border: 1px solid var(--hqre-line);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(16, 49, 28, .92), rgba(7, 24, 14, .95));
    box-shadow: var(--hqre-shadow)
}

.hqre-card-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 15px
}

.hqre-head-icon {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 1px solid var(--hqre-line);
    border-radius: 12px;
    background: rgba(201, 255, 66, .08);
    color: var(--hqre-lime)
}

.hqre-head-icon svg {
    width: 21px;
    height: 21px
}

.hqre-head-copy {
    min-width: 0
}

.hqre-head-copy h2 {
    margin: 0 0 3px;
    color: var(--hqre-text);
    font: 700 17px/1.25 'Space Grotesk', sans-serif;
    letter-spacing: -.03em
}

.hqre-head-copy p {
    margin: 0;
    color: var(--hqre-muted2);
    font-size: 11px;
    line-height: 1.55
}

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

.hqre-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--hqre-line);
    border-radius: 14px;
    background: rgba(4, 20, 10, .4)
}

.hqre-table-wrap::-webkit-scrollbar {
    height: 7px
}

.hqre-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(201, 255, 66, .28);
    border-radius: 10px
}

.hqre-page table.table {
    width: 100%;
    min-width: 940px;
    margin: 0;
    border-collapse: collapse
}

.hqre-page table.table th,
.hqre-page table.table td {
    padding: 13px 14px;
    border: 0;
    border-bottom: 1px solid rgba(201, 255, 66, .08);
    vertical-align: middle;
    text-align: left;
    white-space: nowrap
}

.hqre-page table.table thead th {
    background: rgba(201, 255, 66, .05);
    color: var(--hqre-lime);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase
}

.hqre-page table.table tbody tr {
    transition: .15s
}

.hqre-page table.table tbody tr:hover {
    background: rgba(201, 255, 66, .045)
}

.hqre-page table.table tbody tr:last-child td {
    border-bottom: 0
}

.hqre-page table.table td {
    color: #d5dfd2;
    font-size: 12.5px
}

.hqre-page table.table td.muted,
.hqre-page table.table td.text-center {
    padding: 38px 15px;
    color: var(--hqre-muted) !important;
    text-align: center
}

.hqre-page table.table .amount {
    color: var(--hqre-lime);
    font: 700 12.5px 'Space Grotesk', sans-serif;
    white-space: nowrap
}

/* ================= PAYOUT ACTION CELL ================= */

.hqre-page .payout-action-wrap {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 210px
}

.hqre-page .payout-action-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.hqre-page .payout-action-chip {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 10px;
    border: 1px solid var(--hqre-line);
    border-radius: 999px;
    background: rgba(201, 255, 66, .05);
    color: var(--hqre-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .03em;
    white-space: nowrap
}

.hqre-page .payout-action-chip--available {
    border-color: rgba(126, 245, 155, .35);
    background: rgba(126, 245, 155, .08);
    color: #7ef59b
}

.hqre-page .btn-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: max-content;
    min-height: 40px;
    margin: 0;
    padding: 9px 16px;
    border: 1px solid var(--hqre-lime);
    border-radius: 10px;
    background: linear-gradient(135deg, var(--hqre-lime), #a6ef2e);
    color: #10200d;
    box-shadow: 0 10px 22px rgba(201, 255, 66, .14);
    font: 800 12px 'DM Sans', sans-serif;
    cursor: pointer;
    transition: .2s
}

.hqre-page .btn-actions:hover {
    transform: translateY(-2px);
    background: #dcff78;
    box-shadow: 0 14px 28px rgba(201, 255, 66, .2)
}

.hqre-page .payout-action-note {
    color: var(--hqre-muted2);
    font-size: 10.5px;
    line-height: 1.55;
    white-space: normal
}

/* ================= STATUS PILLS ================= */

.hqre-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border: 1px solid transparent;
    border-radius: 999px;
    font: 800 10.5px 'DM Sans', sans-serif;
    letter-spacing: .03em;
    white-space: nowrap
}

.hqre-status:before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor
}

.hqre-status--pending {
    border-color: rgba(255, 206, 110, .4);
    background: rgba(255, 206, 110, .08);
    color: #ffce6e
}

.hqre-status--disapproved {
    border-color: rgba(255, 158, 89, .4);
    background: rgba(255, 158, 89, .09);
    color: #ffab6e
}

.hqre-status--approved {
    border-color: rgba(126, 245, 155, .35);
    background: rgba(126, 245, 155, .09);
    color: #7ef59b
}

.hqre-status--rejected {
    border-color: rgba(255, 143, 130, .4);
    background: rgba(255, 143, 130, .09);
    color: #ff9d95
}

.hqre-status:not(.hqre-status--pending):not(.hqre-status--disapproved):not(.hqre-status--approved):not(.hqre-status--rejected) {
    border-color: var(--hqre-line2);
    background: rgba(201, 255, 66, .07);
    color: var(--hqre-lime)
}

/* ================= RESPONSIVE ================= */

@media(max-width:820px) {
    .hqre-overview {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)
    }
    .hqre-stat:first-child {
        grid-column: 1 / -1
    }
}

@media(max-width:640px) {
    .hqre-page {
        padding: 16px 10px 42px
    }
    .hqre-card {
        padding: 14px;
        border-radius: 16px
    }
    .hqre-overview {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px
    }
}









:root {
    --hqrf-bg: #06150e;
    --hqrf-soft: #0a1d13;
    --hqrf-card: #0e2b1a;
    --hqrf-line: rgba(201, 255, 66, .18);
    --hqrf-line2: rgba(201, 255, 66, .48);
    --hqrf-lime: #c9ff42;
    --hqrf-text: #f4f9ec;
    --hqrf-muted: #a6b8a5;
    --hqrf-muted2: #708676;
    --hqrf-shadow: 0 22px 60px rgba(0, 0, 0, .27)
}

.hqrf-page,
.hqrf-page * {
    box-sizing: border-box
}

.hqrf-page {
    min-height: calc(100vh - 78px);
    padding: 28px clamp(14px, 2.4vw, 34px) 60px;
    overflow: hidden;
    color: var(--hqrf-text);
    background: radial-gradient(circle at 8% 0, rgba(157, 255, 70, .09), transparent 28rem), radial-gradient(circle at 94% 20%, rgba(38, 149, 78, .09), transparent 30rem), linear-gradient(180deg, var(--hqrf-bg), var(--hqrf-soft) 50%, var(--hqrf-bg));
    font-family: 'DM Sans', sans-serif
}

.hqrf-page ::selection {
    background: rgba(201, 255, 66, .25)
}

.hqrf-container {
    width: 100%;
    max-width: 1100px;
    margin: auto
}

/* ================= PAGE HEAD ================= */

.hqrf-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px
}

.hqrf-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--hqrf-lime);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase
}

.hqrf-head h1 {
    margin: 0 0 5px;
    color: var(--hqrf-text);
    font: 700 clamp(23px, 2.6vw, 29px)/1.15 'Space Grotesk', sans-serif;
    letter-spacing: -.045em
}

.hqrf-head p {
    margin: 0;
    color: var(--hqrf-muted);
    font-size: 12px;
    line-height: 1.6
}

.hqrf-page-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 36px;
    padding: 8px 14px;
    border: 1px solid var(--hqrf-line);
    border-radius: 999px;
    background: rgba(16, 49, 28, .6);
    color: var(--hqrf-muted);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap
}

.hqrf-page-chip strong {
    color: var(--hqrf-lime);
    font-family: 'Space Grotesk', sans-serif
}

/* ================= CONTENT NOTE ================= */

.hqrf-note {
    margin: 0 0 16px;
    padding: 15px 16px;
    border: 1px solid var(--hqrf-line);
    border-radius: 15px;
    background: rgba(201, 255, 66, .045);
    color: #d1ded0;
    font-size: 12.5px;
    line-height: 1.75;
    overflow-wrap: anywhere
}

.hqrf-note a {
    color: var(--hqrf-lime)
}

/* ================= CARD ================= */

.hqrf-card {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--hqrf-line);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(16, 49, 28, .92), rgba(7, 24, 14, .95));
    box-shadow: var(--hqrf-shadow)
}

/* ================= STATUS TABS ================= */

.hqrf-page .nav.nav-pills.tab {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    margin: 0 0 15px;
    padding: 0 0 4px;
    overflow-x: auto;
    list-style: none
}

.hqrf-page .nav.nav-pills.tab::-webkit-scrollbar {
    height: 5px
}

.hqrf-page .nav.nav-pills.tab::-webkit-scrollbar-thumb {
    background: rgba(201, 255, 66, .28);
    border-radius: 10px
}

.hqrf-page .nav.nav-pills.tab .nav-item {
    flex: 0 0 auto
}

.hqrf-page .nav.nav-pills.tab .nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 15px;
    border: 1px solid rgba(201, 255, 66, .18);
    border-radius: 999px;
    background: rgba(17, 53, 29, .68);
    color: var(--hqrf-muted);
    font: 700 12px 'DM Sans', sans-serif;
    text-decoration: none;
    white-space: nowrap;
    transition: .18s
}

.hqrf-page .nav.nav-pills.tab .nav-link:hover {
    border-color: var(--hqrf-line2);
    color: var(--hqrf-lime);
    transform: translateY(-1px)
}

.hqrf-page .nav.nav-pills.tab .nav-link.active {
    border-color: var(--hqrf-lime);
    background: linear-gradient(135deg, var(--hqrf-lime), #9aea28);
    color: #12210d;
    box-shadow: 0 8px 20px rgba(201, 255, 66, .15)
}

/* ================= SEARCH ================= */

.hqrf-page form#history-search {
    margin: 0 0 15px
}

.hqrf-page form#history-search .input-group {
    position: relative;
    display: flex
}

.hqrf-page form#history-search .form-control {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid rgba(201, 255, 66, .18);
    border-radius: 12px 0 0 12px;
    border-right: 0;
    background: rgba(3, 18, 9, .5);
    color: var(--hqrf-text);
    outline: 0;
    font: 400 13px 'DM Sans', sans-serif;
    transition: .18s
}

.hqrf-page form#history-search .form-control:focus {
    border-color: rgba(201, 255, 66, .68);
    box-shadow: 0 0 0 3px rgba(201, 255, 66, .075)
}

.hqrf-page form#history-search .form-control::placeholder {
    color: var(--hqrf-muted2)
}

.hqrf-page form#history-search .input-group-append {
    display: flex
}

.hqrf-page form#history-search .btn-big-secondary {
    display: grid;
    place-items: center;
    min-width: 49px;
    min-height: 46px;
    padding: 0 15px;
    border: 1px solid var(--hqrf-lime);
    border-radius: 0 12px 12px 0;
    background: linear-gradient(135deg, var(--hqrf-lime), #a6ef2e);
    color: #10200d;
    font-size: 13px;
    cursor: pointer;
    transition: .2s
}

.hqrf-page form#history-search .btn-big-secondary:hover {
    background: #dcff78
}

/* ================= TABLE ================= */

.hqrf-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--hqrf-line);
    border-radius: 14px;
    background: rgba(4, 20, 10, .4)
}

.hqrf-table-wrap::-webkit-scrollbar {
    height: 7px
}

.hqrf-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(201, 255, 66, .28);
    border-radius: 10px
}

.hqrf-page table.table {
    width: 100%;
    min-width: 780px;
    margin: 0;
    border-collapse: collapse
}

.hqrf-page table.table th,
.hqrf-page table.table td {
    padding: 12px 15px;
    border: 0;
    border-bottom: 1px solid rgba(201, 255, 66, .08);
    vertical-align: middle;
    text-align: left
}

.hqrf-page table.table thead th {
    background: rgba(201, 255, 66, .05);
    color: var(--hqrf-lime);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap
}

.hqrf-page table.table tbody tr {
    transition: .15s
}

.hqrf-page table.table tbody tr:hover {
    background: rgba(201, 255, 66, .045)
}

.hqrf-page table.table tbody tr:last-child td {
    border-bottom: 0
}

.hqrf-page table.table td {
    color: #d5dfd2;
    font-size: 12.5px
}

.hqrf-page table.table td:first-child {
    color: var(--hqrf-lime);
    font: 700 12px 'Space Grotesk', sans-serif;
    white-space: nowrap
}

.hqrf-page table.table td:nth-child(2) {
    color: var(--hqrf-muted);
    white-space: nowrap
}

.hqrf-page table.table td:nth-child(3) a {
    color: var(--hqrf-lime);
    font: 700 12px 'Space Grotesk', sans-serif;
    text-decoration: none
}

.hqrf-page table.table td:nth-child(3) a:hover {
    text-decoration: underline
}

.hqrf-page table.table .hqrf-link {
    display: inline-block;
    max-width: 190px;
    overflow: hidden;
    color: #8fd4ff;
    font-size: 12px;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap
}

.hqrf-page table.table .hqrf-link:hover {
    color: var(--hqrf-lime)
}

.hqrf-page table.table td.hqrf-empty {
    padding: 38px 15px !important;
    color: var(--hqrf-muted) !important;
    text-align: center
}

/* ================= STATUS PILL =================
   Same branches as the original inline-style conditional:
   Completed / Refilling / Pending / Error / Rejected / else */

.hqrf-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 20px;
    font: 800 10.5px 'DM Sans', sans-serif;
    letter-spacing: .03em;
    text-align: center;
    white-space: nowrap;
    cursor: pointer
}

.hqrf-status--completed {
    border-color: rgba(126, 245, 155, .35);
    background: rgba(14, 127, 0, .22);
    color: #7ef59b
}

.hqrf-status--refilling {
    border-color: rgba(126, 150, 255, .4);
    background: rgba(38, 11, 193, .3);
    color: #9da6ff
}

.hqrf-status--pending,
.hqrf-status--error {
    border-color: rgba(95, 216, 207, .4);
    background: rgba(66, 183, 175, .18);
    color: #67e0d6
}

.hqrf-status--rejected {
    border-color: rgba(197, 139, 255, .4);
    background: rgba(112, 34, 131, .35);
    color: #d0a0ff
}

.hqrf-status--other {
    border-color: rgba(255, 158, 89, .4);
    background: rgba(242, 88, 0, .2);
    color: #ffab6e
}

/* ================= PAGINATION ================= */

.hqrf-page ul.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none
}

.hqrf-page ul.pagination li {
    display: inline-flex
}

.hqrf-page ul.pagination li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid rgba(201, 255, 66, .2);
    border-radius: 10px;
    background: rgba(17, 53, 29, .7);
    color: #dce8d9;
    font: 700 12.5px 'Space Grotesk', sans-serif;
    text-decoration: none;
    transition: .18s
}

.hqrf-page ul.pagination li a:hover {
    border-color: var(--hqrf-lime);
    color: var(--hqrf-lime);
    transform: translateY(-1px)
}

.hqrf-page ul.pagination li.active a {
    border-color: var(--hqrf-lime);
    background: linear-gradient(135deg, var(--hqrf-lime), #9aea28);
    color: #12210d;
    box-shadow: 0 8px 20px rgba(201, 255, 66, .16)
}

/* ================= RESPONSIVE ================= */

@media(max-width:640px) {
    .hqrf-page {
        padding: 16px 10px 42px
    }
    .hqrf-head {
        align-items: flex-start;
        flex-direction: column
    }
    .hqrf-card {
        padding: 13px;
        border-radius: 16px
    }
    .hqrf-page table.table .hqrf-link {
        max-width: 130px
    }
}














.hqrd-page,
.hqrd-page * {
    box-sizing: border-box
}

.hqrd-page {
    --hqrd-lime: #c9ff42;
    --hqrd-text: #f4f9ec;
    --hqrd-muted: #a6b8a5;
    --hqrd-muted2: #708676;
    --hqrd-line: rgba(201, 255, 66, .18);
    --hqrd-line2: rgba(201, 255, 66, .48);
    --hqrd-shadow: 0 22px 60px rgba(0, 0, 0, .27);
    min-height: calc(100vh - 78px);
    padding: 28px clamp(14px, 2.4vw, 34px) 60px;
    overflow: hidden;
    color: var(--hqrd-text);
    background: radial-gradient(circle at 8% 0, rgba(157, 255, 70, .09), transparent 28rem), radial-gradient(circle at 94% 20%, rgba(38, 149, 78, .09), transparent 30rem), linear-gradient(180deg, #06150e, #0a1d13 50%, #06150e);
    font-family: 'DM Sans', sans-serif
}

.hqrd-container {
    width: 100%;
    max-width: 1280px;
    margin: auto
}

/* ================= HERO ================= */

.hqrd-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
    padding: 22px 24px;
    border: 1px solid var(--hqrd-line);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(20, 58, 33, .86), rgba(8, 27, 16, .9));
    box-shadow: var(--hqrd-shadow)
}

.hqrd-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: var(--hqrd-lime);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-family: 'Space Grotesk', sans-serif
}

.hqrd-hero h1 {
    margin: 0 0 6px;
    color: var(--hqrd-text);
    font: 700 clamp(24px, 3vw, 33px)/1.15 'Space Grotesk', sans-serif;
    letter-spacing: -.045em
}

.hqrd-hero p {
    margin: 0;
    color: var(--hqrd-muted);
    font-size: 12px;
    line-height: 1.6;
    max-width: 56ch
}

.hqrd-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid var(--hqrd-line);
    border-radius: 10px;
    background: rgba(201, 255, 66, .07);
    color: var(--hqrd-lime);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap
}

.hqrd-hero-badge svg {
    width: 15px;
    height: 15px
}

/* ================= INFO NOTE ================= */

.hqrd-note {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
    padding: 13px 44px 13px 15px;
    border: 1px solid rgba(126, 200, 245, .25);
    border-radius: 13px;
    background: rgba(126, 200, 245, .06);
    color: #bcd9ec;
    font-size: 12.5px;
    line-height: 1.6
}

.hqrd-note > svg {
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    color: #7ec8f5
}

.hqrd-note .close {
    position: absolute;
    top: 50%;
    right: 10px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: rgba(255, 255, 255, .05);
    color: var(--hqrd-muted);
    font-size: 15px;
    line-height: 1;
    opacity: 1;
    text-shadow: none;
    cursor: pointer;
    transform: translateY(-50%);
    transition: .18s
}

.hqrd-note .close:hover {
    background: rgba(255, 255, 255, .14);
    color: var(--hqrd-text)
}

/* ================= TABS ================= */

.hqrd-tabs {
    margin-bottom: 16px
}

.hqrd-tablist {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--hqrd-line);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(16, 49, 28, .92), rgba(7, 24, 14, .95));
    list-style: none;
    box-shadow: var(--hqrd-shadow)
}

.hqrd-tablist .nav-item {
    margin: 0
}

.hqrd-tablist .nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 20px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--hqrd-muted);
    font: 700 12.5px 'DM Sans', sans-serif;
    letter-spacing: .02em;
    text-decoration: none;
    transition: .18s
}

.hqrd-tablist .nav-link:hover {
    color: var(--hqrd-lime);
    background: rgba(201, 255, 66, .07)
}

.hqrd-tablist .nav-link.active {
    border-color: var(--hqrd-lime);
    background: linear-gradient(135deg, var(--hqrd-lime), #9aea28);
    color: #12210d;
    box-shadow: 0 8px 20px rgba(201, 255, 66, .15)
}

/* ================= SEARCH ================= */

.hqrd-search-card {
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid var(--hqrd-line);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(16, 49, 28, .92), rgba(7, 24, 14, .95));
    box-shadow: var(--hqrd-shadow)
}

.hqrd-search .input-group {
    display: flex;
    gap: 9px;
    width: 100%
}

.hqrd-search .form-control {
    flex: 1 1 auto;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 47px;
    padding: 11px 14px 11px 40px;
    border: 1px solid rgba(201, 255, 66, .18);
    border-radius: 11px;
    background: rgba(3, 18, 9, .5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23708676' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") 14px center no-repeat;
    color: var(--hqrd-text);
    outline: 0;
    font: 400 13px 'DM Sans', sans-serif;
    transition: .18s
}

.hqrd-search .form-control:focus {
    border-color: rgba(201, 255, 66, .68);
    box-shadow: 0 0 0 3px rgba(201, 255, 66, .075)
}

.hqrd-search .form-control::placeholder {
    color: var(--hqrd-muted2)
}

.hqrd-search .input-group-append {
    display: flex
}

.hqrd-search button[type=submit] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 47px;
    padding: 11px 22px;
    border: 1px solid var(--hqrd-lime);
    border-radius: 11px;
    background: linear-gradient(135deg, var(--hqrd-lime), #a6ef2e);
    color: #10200d;
    box-shadow: 0 10px 24px rgba(201, 255, 66, .16);
    font: 800 13px 'DM Sans', sans-serif;
    cursor: pointer;
    transition: .2s
}

.hqrd-search button[type=submit]:hover {
    transform: translateY(-2px);
    background: #dcff78
}

.hqrd-search button[type=submit] .fa-search,
.hqrd-search button[type=submit] .fas {
    font-size: 13px
}

/* ================= TABLE CARD ================= */

.hqrd-table-card {
    overflow: hidden;
    border: 1px solid var(--hqrd-line) !important;
    border-radius: 20px !important;
    background: linear-gradient(145deg, rgba(16, 49, 28, .92), rgba(7, 24, 14, .95)) !important;
    box-shadow: var(--hqrd-shadow) !important
}

.hqrd-table-wrap {
    width: 100%;
    overflow-x: auto
}

.hqrd-table {
    width: 100%;
    min-width: 720px;
    margin: 0;
    border-collapse: collapse;
    border-spacing: 0
}

.hqrd-table thead th {
    padding: 15px 18px;
    border: 0;
    border-bottom: 1px solid var(--hqrd-line);
    background: rgba(201, 255, 66, .035);
    color: var(--hqrd-muted2);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle
}

.hqrd-table tbody td {
    padding: 15px 18px;
    border: 0;
    border-bottom: 1px solid rgba(201, 255, 66, .07);
    background: transparent;
    color: #dce8d9;
    font-size: 12.5px;
    line-height: 1.55;
    vertical-align: middle
}

.hqrd-table tbody tr {
    transition: background .15s
}

.hqrd-table tbody tr:hover {
    background: rgba(201, 255, 66, .035)
}

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

/* order id */
.hqrd-id {
    display: flex;
    align-items: center;
    gap: 8px
}

.hqrd-id a {
    padding: 4px 11px;
    border: 1px solid rgba(201, 255, 66, .3);
    border-radius: 8px;
    background: rgba(201, 255, 66, .08);
    color: var(--hqrd-lime);
    font: 700 12px ui-monospace, 'SF Mono', Consolas, monospace;
    text-decoration: none;
    transition: .18s
}

.hqrd-id a:hover {
    background: var(--hqrd-lime);
    color: #12210d
}

.hqrd-copy {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    padding: 0;
    border: 1px solid var(--hqrd-line);
    border-radius: 8px;
    background: rgba(201, 255, 66, .06);
    color: var(--hqrd-muted);
    cursor: pointer;
    transition: .18s
}

.hqrd-copy svg {
    width: 13px;
    height: 13px
}

.hqrd-copy:hover {
    border-color: var(--hqrd-lime);
    color: var(--hqrd-lime);
    transform: translateY(-1px)
}

/* amount */
.hqrd-amount {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid rgba(126, 245, 155, .4);
    border-radius: 999px;
    background: rgba(126, 245, 155, .1);
    color: #7ef59b;
    font: 800 12px 'Space Grotesk', sans-serif;
    white-space: nowrap
}

.hqrd-amount svg {
    width: 12px;
    height: 12px
}

/* status pills */
.hqrd-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    font: 800 10.5px 'Space Grotesk', sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap
}

.hqrd-status:before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor
}

.hqrd-status--completed {
    border: 1px solid rgba(126, 245, 155, .42);
    background: rgba(126, 245, 155, .1);
    color: #7ef59b
}

.hqrd-status--partial {
    border: 1px solid rgba(255, 207, 107, .42);
    background: rgba(255, 207, 107, .1);
    color: #ffcf6b
}

.hqrd-status--canceled {
    border: 1px solid rgba(255, 143, 130, .42);
    background: rgba(255, 143, 130, .1);
    color: #ff8f82
}

.hqrd-date {
    color: var(--hqrd-muted);
    white-space: nowrap
}

/* empty state */
.hqrd-empty {
    padding: 52px 20px !important;
    text-align: center !important
}

.hqrd-empty-inner {
    display: inline-grid;
    justify-items: center;
    gap: 10px;
    color: var(--hqrd-muted)
}

.hqrd-empty-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid var(--hqrd-line);
    border-radius: 15px;
    background: rgba(201, 255, 66, .07);
    color: var(--hqrd-lime)
}

.hqrd-empty-icon svg {
    width: 24px;
    height: 24px
}

.hqrd-empty strong {
    color: var(--hqrd-text);
    font: 700 15px 'Space Grotesk', sans-serif
}

.hqrd-empty span {
    font-size: 12px
}

/* ================= MOBILE : stacked rows ================= */

@media(max-width:760px) {
    .hqrd-page {
        padding: 16px 10px 42px
    }
    .hqrd-hero {
        display: block;
        padding: 17px;
        border-radius: 16px
    }
    .hqrd-hero-badge {
        margin-top: 13px
    }
    .hqrd-tablist {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        width: 100%
    }
    .hqrd-tablist .nav-link {
        justify-content: center;
        padding: 8px 10px
    }
    .hqrd-search .input-group {
        flex-direction: column
    }
    .hqrd-search button[type=submit] {
        width: 100%
    }
    .hqrd-table {
        min-width: 0
    }
    .hqrd-table thead {
        display: none
    }
    .hqrd-table,
    .hqrd-table tbody,
    .hqrd-table tr,
    .hqrd-table td {
        display: block;
        width: 100%
    }
    .hqrd-table tbody tr {
        margin: 0;
        padding: 6px 14px;
        border-bottom: 1px solid rgba(201, 255, 66, .16)
    }
    .hqrd-table tbody tr:last-child {
        border-bottom: 0
    }
    .hqrd-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 9px 0;
        border: 0;
        text-align: right
    }
    .hqrd-table tbody td:before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--hqrd-muted2);
        font-size: 9.5px;
        font-weight: 800;
        letter-spacing: .09em;
        text-align: left;
        text-transform: uppercase
    }
    .hqrd-table tbody td.hqrd-empty {
        display: block;
        text-align: center
    }
    .hqrd-table tbody td.hqrd-empty:before {
        content: none
    }
}













:root{--hqno-bg:#06150e;--hqno-soft:#0a1d13;--hqno-card:#0e2b1a;--hqno-card2:#0a2114;--hqno-line:rgba(201,255,66,.18);--hqno-line2:rgba(201,255,66,.48);--hqno-lime:#c9ff42;--hqno-text:#f4f9ec;--hqno-muted:#a6b8a5;--hqno-muted2:#708676;--hqno-shadow:0 22px 60px rgba(0,0,0,.27)}
.hqno-page,.hqno-page *{box-sizing:border-box}.hqno-page{min-height:calc(100vh - 78px);padding:28px clamp(14px,2.4vw,34px) 60px;overflow:hidden;color:var(--hqno-text);background:radial-gradient(circle at 8% 0,rgba(157,255,70,.09),transparent 28rem),radial-gradient(circle at 94% 20%,rgba(38,149,78,.09),transparent 30rem),linear-gradient(180deg,var(--hqno-bg),var(--hqno-soft) 50%,var(--hqno-bg));font-family:'DM Sans',sans-serif}.hqno-container{width:100%;max-width:1440px;margin:auto}
.hqno-hero{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px;padding:22px 24px;border:1px solid var(--hqno-line);border-radius:20px;background:linear-gradient(145deg,rgba(20,58,33,.86),rgba(8,27,16,.9));box-shadow:var(--hqno-shadow)}.hqno-hero h1{margin:0 0 5px;color:var(--hqno-text);font:700 clamp(24px,3vw,34px)/1.15 'Space Grotesk',sans-serif;letter-spacing:-.045em}.hqno-hero p{margin:0;color:var(--hqno-muted);font-size:12px;line-height:1.6}.hqno-hero-badge{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--hqno-line);border-radius:10px;background:rgba(201,255,66,.07);color:var(--hqno-lime);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.hqno-info{margin-bottom:16px;padding:14px 16px;border:1px solid var(--hqno-line);border-radius:13px;background:rgba(201,255,66,.06);color:var(--hqno-muted);font-size:12px;line-height:1.7}.hqno-card{border:1px solid var(--hqno-line);border-radius:20px;background:linear-gradient(145deg,rgba(16,49,28,.92),rgba(7,24,14,.95));box-shadow:var(--hqno-shadow);overflow:hidden}.hqno-toolbar{display:grid;grid-template-columns:auto auto minmax(220px,1fr);gap:11px;align-items:center;padding:16px;border-bottom:1px solid var(--hqno-line);background:rgba(255,255,255,.018)}
.hqno-dropdown{position:relative}.hqno-filter-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:220px;min-height:47px;padding:11px 13px;border:1px solid rgba(201,255,66,.18);border-radius:11px;background:rgba(3,18,9,.5);color:var(--hqno-text)!important;font:700 13px 'DM Sans',sans-serif;text-decoration:none!important}.hqno-filter-btn:hover{border-color:var(--hqno-line2);color:var(--hqno-lime)!important}.hqno-filter-btn i{color:var(--hqno-lime)}.hqno-dropdown-menu{position:absolute;z-index:1050;top:100%;left:0;display:none;min-width:100%;max-width:min(480px,90vw);max-height:360px;margin-top:7px;padding:7px;overflow-y:auto;border:1px solid var(--hqno-line2);border-radius:13px;background:#102d1c;box-shadow:var(--hqno-shadow)}.hqno-dropdown-menu.show{display:block}.hqno-dropdown-menu .dropdown-item{display:block;width:100%;padding:10px 12px;border-radius:9px;color:#dce8d9!important;font-size:13px;font-weight:600;white-space:normal;text-decoration:none}.hqno-dropdown-menu .dropdown-item:hover{background:rgba(201,255,66,.1);color:var(--hqno-lime)!important}
.hqno-search{position:relative;min-width:0}.hqno-search input{display:block;width:100%!important;min-height:47px;padding:11px 46px 11px 42px;border:1px solid rgba(201,255,66,.18);border-radius:11px;background:rgba(3,18,9,.5);color:var(--hqno-text);outline:0;font:400 13px 'DM Sans',sans-serif}.hqno-search input:focus{border-color:rgba(201,255,66,.68);box-shadow:0 0 0 3px rgba(201,255,66,.075)}.hqno-search input::placeholder{color:var(--hqno-muted2)}.hqno-search .search-icon,.hqno-search button{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;border:0;background:none;color:var(--hqno-muted);cursor:pointer}.hqno-search .search-icon{left:14px}.hqno-search button{right:10px;width:30px;height:30px}.hqno-search button:hover{color:var(--hqno-lime)}
.hqno-platform-wrap{padding:13px;border-bottom:1px solid var(--hqno-line);background:rgba(4,20,11,.34)}.hqno-platforms{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}.hqno-platform-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:47px;padding:9px 8px;border:1px solid rgba(201,255,66,.17);border-radius:11px;background:rgba(17,53,29,.68);color:var(--hqno-text);font:700 11px/1.2 'DM Sans',sans-serif;cursor:pointer;transition:.18s}.hqno-platform-btn:hover,.hqno-platform-btn:focus{transform:translateY(-2px);border-color:rgba(201,255,66,.55);background:rgba(201,255,66,.1);color:var(--hqno-lime);outline:0}.hqno-platform-btn.is-active{border-color:var(--hqno-lime);background:linear-gradient(135deg,var(--hqno-lime),#9aea28);color:#12210d;box-shadow:0 9px 24px rgba(201,255,66,.15)}.hqno-platform-btn i{flex:0 0 20px;font-size:18px;text-align:center}.hqno-platform-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hqno-platform-btn[data-platform=youtube] i{color:#ff3030}.hqno-platform-btn[data-platform=facebook] i{color:#1877f2}.hqno-platform-btn[data-platform=instagram] i{color:#ef4c85}.hqno-platform-btn[data-platform=telegram] i{color:#29a9e8}.hqno-platform-btn[data-platform=tiktok] i{color:#ff416c}.hqno-platform-btn[data-platform=twitter] i{color:#f4f9ec}.hqno-platform-btn[data-platform=linkedin] i{color:#0a66c2}.hqno-platform-btn[data-platform=discord] i{color:#6674f4}.hqno-platform-btn[data-platform=spotify] i{color:#1ed760}.hqno-platform-btn[data-platform=twitch] i{color:#9146ff}.hqno-platform-btn[data-platform=soundcloud] i{color:#ff7300}.hqno-platform-btn.is-active i{color:#12210d!important}
.hqno-table-wrap{width:100%;overflow-x:auto}.hqno-table{width:100%;min-width:1060px;border-collapse:separate;border-spacing:0}.hqno-table th{padding:14px;border-bottom:1px solid var(--hqno-line);background:rgba(201,255,66,.035);color:var(--hqno-muted2);font-size:10px;font-weight:800;letter-spacing:.08em;text-align:left;text-transform:uppercase;white-space:nowrap}.hqno-table td{padding:14px;border-bottom:1px solid rgba(201,255,66,.075);color:#dce8d9;font-size:12px;line-height:1.55;vertical-align:middle}.hqno-table tbody tr:not(.hqno-category):hover{background:rgba(201,255,66,.035)}.hqno-category td{padding:13px 14px!important;border-bottom:1px solid rgba(201,255,66,.2)!important;background:linear-gradient(90deg,rgba(201,255,66,.13),rgba(201,255,66,.025));color:var(--hqno-lime)!important;font:700 13px 'Space Grotesk',sans-serif}.hqno-id{display:flex;align-items:center;gap:7px;color:var(--hqno-lime);font-weight:800;white-space:nowrap}.hqno-copy{display:grid;place-items:center;width:25px;height:25px;padding:0;border:1px solid var(--hqno-line);border-radius:7px;background:rgba(201,255,66,.06);color:var(--hqno-muted);cursor:pointer}.hqno-copy:hover{border-color:var(--hqno-lime);color:var(--hqno-lime)}.hqno-service-name{min-width:300px;max-width:480px;color:var(--hqno-text);font-weight:600}.hqno-rate{color:var(--hqno-lime);font-weight:800;white-space:nowrap}.hqno-view{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:7px 13px;border:1px solid rgba(201,255,66,.32);border-radius:9px;background:rgba(201,255,66,.09);color:var(--hqno-lime)!important;font-size:11px;font-weight:800;text-decoration:none!important;cursor:pointer}.hqno-view:hover{background:var(--hqno-lime);color:#12210d!important}
.hqno-modal.modal{display:none!important;position:fixed;inset:0;z-index:10600!important;overflow-x:hidden;overflow-y:auto;background:rgba(3,13,7,.78);backdrop-filter:blur(7px)}.hqno-modal.modal.show{display:block!important}.hqno-modal .modal-dialog{width:calc(100% - 30px);max-width:620px;margin:7vh auto}.hqno-modal .modal-content{overflow:hidden;border:1px solid rgba(201,255,66,.38)!important;border-radius:18px!important;background:linear-gradient(150deg,#10341e,#071910)!important;color:var(--hqno-text)!important;box-shadow:0 25px 70px rgba(0,0,0,.75)!important}.hqno-modal .modal-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;border-bottom:1px solid var(--hqno-line);background:rgba(255,255,255,.018)}.hqno-modal .modal-title{margin:0;color:var(--hqno-text);font:700 17px 'Space Grotesk',sans-serif}.hqno-modal .close{width:32px;height:32px;padding:0;border:1px solid var(--hqno-line);border-radius:8px;background:rgba(201,255,66,.08);color:var(--hqno-lime);font-size:20px;opacity:1}.hqno-modal .modal-body{max-height:60vh;padding:22px;overflow-y:auto}.hqno-description{margin:0;color:#d1ded0;font-size:13px;line-height:1.8;white-space:pre-wrap;word-break:break-word}.hqno-modal .modal-footer{display:flex;gap:10px;padding:15px 22px;border-top:1px solid var(--hqno-line);background:rgba(0,0,0,.15)}.hqno-order,.hqno-modal-close{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 18px;border:1px solid var(--hqno-lime);border-radius:10px;font-size:12px;font-weight:800;text-decoration:none!important;cursor:pointer}.hqno-order{flex:1;background:linear-gradient(135deg,var(--hqno-lime),#a6ef2e);color:#10200d!important}.hqno-modal-close{background:transparent;color:var(--hqno-lime)!important}.hqno-toast{position:fixed;right:20px;bottom:20px;z-index:99999;padding:11px 16px;border:1px solid var(--hqno-line2);border-radius:10px;background:#10341e;color:var(--hqno-lime);box-shadow:var(--hqno-shadow);font-size:12px;font-weight:800}
@media(max-width:1180px){.hqno-platforms{grid-template-columns:repeat(4,minmax(0,1fr))}.hqno-toolbar{grid-template-columns:auto minmax(220px,1fr)}.hqno-search{grid-column:2;grid-row:1/3}}@media(max-width:760px){.hqno-page{padding:16px 10px 42px}.hqno-hero{display:block;padding:18px;border-radius:16px}.hqno-hero-badge{margin-top:14px}.hqno-toolbar{grid-template-columns:1fr;gap:9px;padding:12px}.hqno-search{grid-column:auto;grid-row:auto}.hqno-filter-btn{width:100%;min-width:0}.hqno-platforms{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.hqno-platform-btn{height:50px;min-height:50px;padding:7px 4px;border-radius:12px}.hqno-platform-name{display:none}.hqno-platform-btn i{flex:0 0 30px;font-size:24px}.hqno-modal .modal-dialog{margin:15px auto}.hqno-modal .modal-header,.hqno-modal .modal-body{padding:16px}.hqno-modal .modal-title{font-size:15px}.hqno-description{font-size:12px}.hqno-modal .modal-footer{flex-direction:column}.hqno-order,.hqno-modal-close{width:100%}}

/* ===== HQ SERVICES — SAFETY FIXES (appended; original rules untouched) ===== */
.hqno-hero {
    align-items: flex-end
}

/* Bootstrap 3 dropdowns open with .open on the wrapper, not .show on the menu */
.hqno-dropdown.open > .hqno-dropdown-menu {
    display: block
}

/* .fade pins opacity:0 in older Bootstrap builds; drive visibility ourselves */
.hqno-modal.modal {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity .25s ease, visibility .25s ease !important
}

.hqno-modal.modal.show {
    opacity: 1 !important;
    visibility: visible !important
}






:root {
    --hqsg-bg: #06150e;
    --hqsg-soft: #0a1d13;
    --hqsg-card: #0e2b1a;
    --hqsg-line: rgba(201, 255, 66, .18);
    --hqsg-line2: rgba(201, 255, 66, .48);
    --hqsg-lime: #c9ff42;
    --hqsg-text: #f4f9ec;
    --hqsg-muted: #a6b8a5;
    --hqsg-muted2: #708676;
    --hqsg-shadow: 0 22px 60px rgba(0, 0, 0, .27)
}

.hqsg-page,
.hqsg-page * {
    box-sizing: border-box
}

.hqsg-page {
    min-height: calc(100vh - 78px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 30px clamp(14px, 2.4vw, 34px) 60px;
    overflow: hidden;
    color: var(--hqsg-text);
    background: radial-gradient(circle at 8% 0, rgba(157, 255, 70, .09), transparent 28rem), radial-gradient(circle at 94% 20%, rgba(38, 149, 78, .09), transparent 30rem), linear-gradient(180deg, var(--hqsg-bg), var(--hqsg-soft) 50%, var(--hqsg-bg));
    font-family: 'DM Sans', sans-serif
}

.hqsg-page ::selection {
    background: rgba(201, 255, 66, .25)
}

.hqsg-shell {
    width: 100%;
    max-width: 470px;
    margin: auto
}

/* ================= HERO ================= */

.hqsg-hero {
    position: relative;
    margin-bottom: 16px;
    padding: 26px 22px;
    overflow: hidden;
    border: 1px solid var(--hqsg-line);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(16, 49, 28, .92), rgba(7, 24, 14, .95));
    box-shadow: var(--hqsg-shadow);
    text-align: center
}

.hqsg-hero:before {
    content: '';
    position: absolute;
    left: 50%;
    top: -90px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(201, 255, 66, .06);
    transform: translateX(-50%);
    pointer-events: none
}

.hqsg-hero-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin: 0 auto 13px;
    border: 1px solid rgba(201, 255, 66, .4);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(201, 255, 66, .16), rgba(201, 255, 66, .05));
    color: var(--hqsg-lime);
    box-shadow: 0 14px 34px rgba(201, 255, 66, .14)
}

.hqsg-hero-icon svg {
    width: 29px;
    height: 29px
}

.hqsg-eyebrow {
    position: relative;
    display: block;
    margin-bottom: 5px;
    color: var(--hqsg-lime);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase
}

.hqsg-hero h1 {
    position: relative;
    margin: 0 0 7px;
    color: var(--hqsg-text);
    font: 700 clamp(23px, 2.6vw, 28px)/1.15 'Space Grotesk', sans-serif;
    letter-spacing: -.045em
}

.hqsg-hero p {
    position: relative;
    margin: 0;
    color: var(--hqsg-muted);
    font-size: 12px;
    line-height: 1.65
}

/* ================= NOTES + ALERTS ================= */

.hqsg-note {
    margin: 0 0 15px;
    padding: 14px 15px;
    border: 1px solid var(--hqsg-line);
    border-radius: 14px;
    background: rgba(201, 255, 66, .045);
    color: #d1ded0;
    font-size: 12.5px;
    line-height: 1.75;
    overflow-wrap: anywhere
}

.hqsg-note a {
    color: var(--hqsg-lime)
}

.hqsg-page .alert {
    position: relative !important;
    margin: 0 0 15px !important;
    padding: 14px 42px 14px 14px !important;
    border-radius: 14px !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    animation: hqsgFadeIn .3s ease-out
}

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

.hqsg-page .alert-success {
    border: 1px solid rgba(201, 255, 66, .35) !important;
    background: linear-gradient(145deg, rgba(14, 43, 24, .95), rgba(6, 25, 13, .98)) !important;
    color: #d8ffb0 !important
}

.hqsg-page .alert-danger {
    border: 1px solid rgba(255, 99, 99, .32) !important;
    background: linear-gradient(145deg, rgba(40, 12, 12, .92), rgba(22, 6, 6, .96)) !important;
    color: #ffd8d8 !important
}

.hqsg-page .alert .close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    display: grid !important;
    place-items: center !important;
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, .05) !important;
    color: inherit !important;
    font-size: 14px !important;
    line-height: 1 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    cursor: pointer !important;
    transition: .18s
}

.hqsg-page .alert .close:hover {
    background: rgba(255, 255, 255, .15) !important
}

/* ================= CARD + FORM ================= */

.hqsg-card {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--hqsg-line);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(16, 49, 28, .92), rgba(7, 24, 14, .95));
    box-shadow: var(--hqsg-shadow)
}

.hqsg-page .form-group {
    margin: 0 0 14px
}

.hqsg-page .control-label,
.hqsg-page label {
    display: block;
    margin: 0 0 7px;
    color: #dce7d9;
    font-size: 12px;
    font-weight: 700
}

.hqsg-page .form-control {
    display: block;
    width: 100%;
    min-height: 47px;
    padding: 11px 13px;
    border: 1px solid rgba(201, 255, 66, .18);
    border-radius: 11px;
    background: rgba(3, 18, 9, .5);
    color: var(--hqsg-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
    outline: 0;
    font: 400 13px 'DM Sans', sans-serif;
    transition: .18s
}

.hqsg-page .form-control:focus {
    border-color: rgba(201, 255, 66, .68);
    box-shadow: 0 0 0 3px rgba(201, 255, 66, .075)
}

.hqsg-page .form-control::placeholder {
    color: var(--hqsg-muted2)
}

/* reCAPTCHA */

.hqsg-page .g-recaptcha {
    display: flex;
    justify-content: center;
    margin: 2px 0
}

.hqsg-page .g-recaptcha > div {
    margin: auto
}

@media(max-width:380px) {
    .hqsg-page .g-recaptcha > div {
        transform: scale(.92);
        transform-origin: center center
    }
}

/* Terms checkbox */

.hqsg-page .custom-checkbox,
.hqsg-page .checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0 0;
    padding: 12px 13px;
    border: 1px dashed rgba(201, 255, 66, .25);
    border-radius: 12px;
    background: rgba(201, 255, 66, .035);
    color: #d1ded0;
    font-size: 11.5px;
    line-height: 1.65
}

.hqsg-page .custom-checkbox input[type=checkbox],
.hqsg-page .checkbox input[type=checkbox] {
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    accent-color: var(--hqsg-lime);
    cursor: pointer
}

.hqsg-page .custom-checkbox a,
.hqsg-page .checkbox a {
    color: var(--hqsg-lime);
    font-weight: 700
}

/* Submit */

.hqsg-page .btn-big-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 49px;
    margin-top: 16px;
    padding: 12px 18px;
    border: 1px solid var(--hqsg-lime);
    border-radius: 11px;
    background: linear-gradient(135deg, var(--hqsg-lime), #a6ef2e);
    color: #10200d;
    box-shadow: 0 12px 28px rgba(201, 255, 66, .16);
    font: 800 14px 'DM Sans', sans-serif;
    cursor: pointer;
    transition: .2s
}

.hqsg-page .btn-big-primary:hover {
    transform: translateY(-2px);
    background: #dcff78;
    box-shadow: 0 16px 34px rgba(201, 255, 66, .23)
}

/* Sign in footer link */

.hqsg-page .hqsg-signin {
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid var(--hqsg-line);
    color: var(--hqsg-muted);
    font-size: 12px;
    text-align: center
}

.hqsg-page .hqsg-signin a,
.hqsg-page a.sign-up-center-signin-link {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    color: var(--hqsg-lime);
    font-weight: 800;
    text-decoration: none
}

.hqsg-page a.sign-up-center-signin-link:hover {
    text-decoration: underline
}

@media(max-width:640px) {
    .hqsg-page {
        padding: 20px 10px 42px
    }
    .hqsg-hero {
        padding: 20px 15px;
        border-radius: 16px
    }
    .hqsg-hero-icon {
        width: 52px;
        height: 52px;
        border-radius: 15px
    }
    .hqsg-card {
        padding: 16px;
        border-radius: 16px
    }
}







:root {
    --hqt-bg: #06150e;
    --hqt-soft: #0a1d13;
    --hqt-card: #0e2b1a;
    --hqt-line: rgba(201, 255, 66, .18);
    --hqt-line2: rgba(201, 255, 66, .48);
    --hqt-lime: #c9ff42;
    --hqt-text: #f4f9ec;
    --hqt-muted: #a6b8a5;
    --hqt-muted2: #708676;
    --hqt-rose: #ff8f82;
    --hqt-shadow: 0 22px 60px rgba(0, 0, 0, .27)
}

.hqt-page,
.hqt-page * {
    box-sizing: border-box
}

.hqt-page {
    min-height: calc(100vh - 78px);
    padding: 28px clamp(14px, 2.4vw, 34px) 60px;
    overflow: hidden;
    color: var(--hqt-text);
    background: radial-gradient(circle at 8% 0, rgba(157, 255, 70, .09), transparent 28rem), radial-gradient(circle at 94% 20%, rgba(38, 149, 78, .09), transparent 30rem), linear-gradient(180deg, var(--hqt-bg), var(--hqt-soft) 50%, var(--hqt-bg));
    font-family: 'DM Sans', sans-serif
}

.hqt-page ::selection {
    background: rgba(201, 255, 66, .25)
}

.hqt-container {
    width: 100%;
    max-width: 880px;
    margin: auto
}

/* ================= HERO ================= */

.hqt-hero {
    position: relative;
    margin-bottom: 14px;
    padding: 30px 22px;
    overflow: hidden;
    border: 1px solid var(--hqt-line);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(16, 49, 28, .92), rgba(7, 24, 14, .95));
    box-shadow: var(--hqt-shadow);
    text-align: center
}

.hqt-hero:before {
    content: '';
    position: absolute;
    left: 50%;
    top: -90px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(201, 255, 66, .06);
    transform: translateX(-50%);
    pointer-events: none
}

.hqt-hero-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 14px;
    border: 1px solid rgba(201, 255, 66, .4);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(201, 255, 66, .16), rgba(201, 255, 66, .05));
    color: var(--hqt-lime);
    box-shadow: 0 14px 34px rgba(201, 255, 66, .12)
}

.hqt-hero-icon svg {
    width: 30px;
    height: 30px
}

.hqt-eyebrow {
    position: relative;
    display: block;
    margin-bottom: 6px;
    color: var(--hqt-lime);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase
}

.hqt-hero h1 {
    position: relative;
    margin: 0 0 8px;
    color: var(--hqt-text);
    font: 700 clamp(25px, 3vw, 34px)/1.15 'Space Grotesk', sans-serif;
    letter-spacing: -.04em;
    text-transform: uppercase
}

.hqt-hero p {
    position: relative;
    max-width: 520px;
    margin: 0 auto;
    color: var(--hqt-muted);
    font-size: 12.5px;
    line-height: 1.7
}

/* ================= TABLE OF CONTENTS ================= */

.hqt-toc {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    margin-bottom: 18px
}

.hqt-toc a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 7px 13px;
    border: 1px solid var(--hqt-line);
    border-radius: 999px;
    background: rgba(16, 49, 28, .6);
    color: var(--hqt-muted);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: .18s
}

.hqt-toc a span {
    color: var(--hqt-lime);
    font: 700 10px 'Space Grotesk', sans-serif
}

.hqt-toc a:hover {
    border-color: var(--hqt-line2);
    color: var(--hqt-lime);
    transform: translateY(-1px)
}

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

.hqt-card {
    position: relative;
    min-width: 0;
    margin-bottom: 16px;
    padding: 22px;
    overflow: hidden;
    border: 1px solid var(--hqt-line);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(16, 49, 28, .92), rgba(7, 24, 14, .95));
    box-shadow: var(--hqt-shadow);
    scroll-margin-top: 90px
}

.hqt-card:hover {
    border-color: rgba(201, 255, 66, .3)
}

.hqt-sec-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--hqt-line)
}

.hqt-sec-num {
    flex: 0 0 auto;
    color: rgba(201, 255, 66, .3);
    font: 700 30px/1 'Space Grotesk', sans-serif;
    letter-spacing: -.03em
}

.hqt-head-icon {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 1px solid var(--hqt-line);
    border-radius: 12px;
    background: rgba(201, 255, 66, .08);
    color: var(--hqt-lime)
}

.hqt-head-icon svg {
    width: 21px;
    height: 21px
}

.hqt-sec-title {
    min-width: 0
}

.hqt-sec-title h2 {
    margin: 0 0 3px;
    color: var(--hqt-text);
    font: 700 clamp(15px, 1.8vw, 18px)/1.3 'Space Grotesk', sans-serif;
    letter-spacing: .02em;
    text-transform: uppercase
}

.hqt-sec-title p {
    margin: 0;
    color: var(--hqt-muted2);
    font-size: 11px
}

/* ================= PROSE ================= */

.hqt-prose h4,
.hqt-prose h5 {
    margin: 18px 0 10px;
    color: var(--hqt-lime);
    font: 700 13.5px/1.4 'Space Grotesk', sans-serif;
    letter-spacing: .06em
}

.hqt-prose h4:first-child,
.hqt-prose h5:first-child {
    margin-top: 0
}

.hqt-prose p {
    margin: 0 0 12px;
    color: #c9d6c6;
    font-size: 12.5px;
    line-height: 1.85
}

.hqt-prose p:last-child {
    margin-bottom: 0
}

.hqt-prose strong,
.hqt-prose b {
    color: #e7efe3;
    font-weight: 600
}

.hqt-prose a {
    color: var(--hqt-lime);
    font-weight: 700
}

.hqt-prose ul {
    display: grid;
    gap: 8px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 143, 130, .16);
    border-radius: 12px;
    background: rgba(255, 143, 130, .035);
    list-style: none
}

.hqt-prose ul li {
    position: relative;
    padding-left: 24px;
    color: #e3c8c2;
    font-size: 12.5px;
    line-height: 1.7
}

.hqt-prose ul li:before {
    content: '\00d7';
    position: absolute;
    left: 2px;
    top: 0;
    color: var(--hqt-rose);
    font: 800 14px/1.7 'DM Sans', sans-serif
}

.hqt-prose ul li strong {
    color: #f2ddd8
}

/* ================= RESPONSIVE ================= */

@media(max-width:640px) {
    .hqt-page {
        padding: 16px 10px 42px
    }
    .hqt-hero {
        padding: 22px 15px;
        border-radius: 16px
    }
    .hqt-hero-icon {
        width: 52px;
        height: 52px;
        border-radius: 15px
    }
    .hqt-hero-icon svg {
        width: 25px;
        height: 25px
    }
    .hqt-card {
        padding: 16px;
        border-radius: 16px
    }
    .hqt-sec-head {
        gap: 10px;
        margin-bottom: 13px;
        padding-bottom: 12px
    }
    .hqt-sec-num {
        font-size: 23px
    }
    .hqt-head-icon {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        border-radius: 10px
    }
    .hqt-head-icon svg {
        width: 18px;
        height: 18px
    }
    .hqt-toc a {
        font-size: 10px;
        padding: 6px 10px
    }
}










:root {
    --hqtk-bg: #06150e;
    --hqtk-soft: #0a1d13;
    --hqtk-card: #0e2b1a;
    --hqtk-line: rgba(201, 255, 66, .18);
    --hqtk-line2: rgba(201, 255, 66, .48);
    --hqtk-lime: #c9ff42;
    --hqtk-text: #f4f9ec;
    --hqtk-muted: #a6b8a5;
    --hqtk-muted2: #708676;
    --hqtk-shadow: 0 22px 60px rgba(0, 0, 0, .27)
}

.hqtk-page,
.hqtk-page * {
    box-sizing: border-box
}

.hqtk-page {
    min-height: calc(100vh - 78px);
    padding: 28px clamp(14px, 2.4vw, 34px) 60px;
    overflow: hidden;
    color: var(--hqtk-text);
    background: radial-gradient(circle at 8% 0, rgba(157, 255, 70, .09), transparent 28rem), radial-gradient(circle at 94% 20%, rgba(38, 149, 78, .09), transparent 30rem), linear-gradient(180deg, var(--hqtk-bg), var(--hqtk-soft) 50%, var(--hqtk-bg));
    font-family: 'DM Sans', sans-serif
}

.hqtk-page ::selection {
    background: rgba(201, 255, 66, .25)
}

.hqtk-container {
    width: 100%;
    max-width: 1240px;
    margin: auto
}

/* ================= HERO ================= */

.hqtk-hero {
    position: relative;
    margin-bottom: 18px;
    padding: 30px 22px;
    overflow: hidden;
    border: 1px solid var(--hqtk-line);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(16, 49, 28, .92), rgba(7, 24, 14, .95));
    box-shadow: var(--hqtk-shadow);
    text-align: center
}

.hqtk-hero:before {
    content: '';
    position: absolute;
    left: 50%;
    top: -90px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(201, 255, 66, .06);
    transform: translateX(-50%);
    pointer-events: none
}

.hqtk-hero-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 13px;
    border: 1px solid rgba(201, 255, 66, .4);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(201, 255, 66, .16), rgba(201, 255, 66, .05));
    color: var(--hqtk-lime);
    box-shadow: 0 14px 34px rgba(201, 255, 66, .14)
}

.hqtk-hero-icon svg {
    width: 30px;
    height: 30px
}

.hqtk-eyebrow {
    position: relative;
    display: block;
    margin-bottom: 6px;
    color: var(--hqtk-lime);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase
}

.hqtk-hero h1 {
    position: relative;
    margin: 0 0 8px;
    color: var(--hqtk-text);
    font: 700 clamp(24px, 2.8vw, 32px)/1.15 'Space Grotesk', sans-serif;
    letter-spacing: -.045em
}

.hqtk-hero p {
    position: relative;
    max-width: 520px;
    margin: 0 auto;
    color: var(--hqtk-muted);
    font-size: 12.5px;
    line-height: 1.7
}

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

.hqtk-page .alert {
    position: relative !important;
    margin: 0 0 16px !important;
    padding: 14px 42px 14px 14px !important;
    border-radius: 14px !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    animation: hqtkFadeIn .3s ease-out
}

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

.hqtk-page .alert-success {
    border: 1px solid rgba(201, 255, 66, .35) !important;
    background: linear-gradient(145deg, rgba(14, 43, 24, .95), rgba(6, 25, 13, .98)) !important;
    color: #d8ffb0 !important
}

.hqtk-page .alert-danger {
    border: 1px solid rgba(255, 99, 99, .32) !important;
    background: linear-gradient(145deg, rgba(40, 12, 12, .92), rgba(22, 6, 6, .96)) !important;
    color: #ffd8d8 !important
}

.hqtk-page .alert .close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    display: grid !important;
    place-items: center !important;
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, .05) !important;
    color: inherit !important;
    font-size: 14px !important;
    line-height: 1 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    cursor: pointer !important;
    transition: .18s
}

.hqtk-page .alert .close:hover {
    background: rgba(255, 255, 255, .15) !important
}

/* ================= LAYOUT ================= */

.hqtk-layout {
    display: grid;
    grid-template-columns: minmax(330px, .88fr) minmax(0, 1.12fr);
    align-items: start;
    gap: 18px
}

.hqtk-card {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--hqtk-line);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(16, 49, 28, .92), rgba(7, 24, 14, .95));
    box-shadow: var(--hqtk-shadow)
}

.hqtk-card + .hqtk-card {
    margin-top: 16px
}

.hqtk-card-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 16px
}

.hqtk-head-icon {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 1px solid var(--hqtk-line);
    border-radius: 12px;
    background: rgba(201, 255, 66, .08);
    color: var(--hqtk-lime)
}

.hqtk-head-icon svg {
    width: 21px;
    height: 21px
}

.hqtk-card-head h2 {
    margin: 0 0 3px;
    color: var(--hqtk-text);
    font: 700 17px/1.25 'Space Grotesk', sans-serif;
    letter-spacing: -.03em
}

.hqtk-card-head p {
    margin: 0;
    color: var(--hqtk-muted2);
    font-size: 11px;
    line-height: 1.55
}

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

.hqtk-page .form-group {
    margin: 0 0 14px
}

.hqtk-page label,
.hqtk-page .control-label,
.hqtk-page .form-label {
    display: block;
    margin: 0 0 7px;
    color: #dce7d9;
    font-size: 12px;
    font-weight: 700
}

.hqtk-page .form-control {
    display: block;
    width: 100%;
    min-height: 47px;
    padding: 11px 13px;
    border: 1px solid rgba(201, 255, 66, .18);
    border-radius: 11px;
    background: rgba(3, 18, 9, .5);
    color: var(--hqtk-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
    outline: 0;
    font: 400 13px 'DM Sans', sans-serif;
    transition: .18s
}

.hqtk-page textarea.form-control {
    min-height: 105px;
    resize: vertical;
    line-height: 1.65
}

.hqtk-page .form-control:focus {
    border-color: rgba(201, 255, 66, .68);
    box-shadow: 0 0 0 3px rgba(201, 255, 66, .075)
}

.hqtk-page .form-control::placeholder {
    color: var(--hqtk-muted2)
}

.hqtk-page select.form-control {
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9ff42' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    appearance: none;
    -webkit-appearance: none
}

.hqtk-page select.form-control option {
    background: #102d1c;
    color: var(--hqtk-text)
}

.hqtk-page small.text-muted,
.hqtk-page .text-muted {
    display: block;
    margin-top: 6px;
    color: var(--hqtk-muted2) !important;
    font-size: 10.5px
}

/* Conditional sub-panels (toggled by page scripts) */

.hqtk-page #order-group,
.hqtk-page #payment-group {
    margin: 0 0 14px;
    padding: 14px;
    border: 1px dashed rgba(201, 255, 66, .25);
    border-radius: 13px;
    background: rgba(201, 255, 66, .035)
}

.hqtk-page #order-group .form-control,
.hqtk-page #payment-group .form-control {
    margin-bottom: 0
}

.hqtk-page #order-group select.form-control {
    margin-top: 2px
}

/* Submit button */

.hqtk-page .btn-big-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 49px;
    padding: 12px 18px;
    border: 1px solid var(--hqtk-lime);
    border-radius: 11px;
    background: linear-gradient(135deg, var(--hqtk-lime), #a6ef2e);
    color: #10200d;
    box-shadow: 0 12px 28px rgba(201, 255, 66, .16);
    font: 800 14px 'DM Sans', sans-serif;
    cursor: pointer;
    transition: .2s
}

.hqtk-page .btn-big-primary:hover {
    transform: translateY(-2px);
    background: #dcff78;
    box-shadow: 0 16px 34px rgba(201, 255, 66, .23)
}

/* ================= SEARCH ================= */

.hqtk-page form#history-search {
    margin: 0 0 15px
}

.hqtk-page form#history-search .input-group {
    display: flex
}

.hqtk-page form#history-search .form-control {
    min-height: 46px;
    border-radius: 12px 0 0 12px;
    border-right: 0
}

.hqtk-page form#history-search .input-group-append {
    display: flex
}

.hqtk-page form#history-search .btn-big-primary {
    width: auto;
    min-width: 49px;
    min-height: 46px;
    padding: 0 15px;
    border-radius: 0 12px 12px 0;
    box-shadow: none
}

.hqtk-page form#history-search .btn-big-primary:hover {
    transform: none
}

/* ================= TICKET TABLE ================= */

.hqtk-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--hqtk-line);
    border-radius: 14px;
    background: rgba(4, 20, 10, .4)
}

.hqtk-table-wrap::-webkit-scrollbar {
    height: 7px
}

.hqtk-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(201, 255, 66, .28);
    border-radius: 10px
}

.hqtk-page table.table {
    width: 100%;
    min-width: 560px;
    margin: 0;
    border-collapse: collapse
}

.hqtk-page table.table th,
.hqtk-page table.table td {
    padding: 12px 15px;
    border: 0;
    border-bottom: 1px solid rgba(201, 255, 66, .08);
    vertical-align: middle;
    text-align: left
}

.hqtk-page table.table thead th {
    background: rgba(201, 255, 66, .05);
    color: var(--hqtk-lime);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap
}

.hqtk-page table.table tbody tr {
    transition: .15s
}

.hqtk-page table.table tbody tr:hover {
    background: rgba(201, 255, 66, .045)
}

.hqtk-page table.table tbody tr:last-child td {
    border-bottom: 0
}

.hqtk-page table.table td {
    color: #d5dfd2;
    font-size: 12.5px
}

.hqtk-page table.table td:first-child {
    color: var(--hqtk-lime);
    font: 700 12px 'Space Grotesk', sans-serif;
    white-space: nowrap
}

.hqtk-page table.table td a {
    color: var(--hqtk-text);
    font-weight: 600;
    text-decoration: none;
    transition: .18s
}

.hqtk-page table.table td a:hover {
    color: var(--hqtk-lime)
}

.hqtk-page table.table td a strong {
    color: var(--hqtk-lime)
}

.hqtk-page table.table .nowrap {
    white-space: nowrap
}

.hqtk-page table.table td:last-child {
    color: var(--hqtk-muted)
}

.hqtk-new {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
    padding: 2.5px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--hqtk-lime), #9aea28);
    color: #12210d;
    font: 800 8.5px/1.6 'DM Sans', sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    vertical-align: middle
}

.hqtk-new:before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #12210d
}

.hqtk-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border: 1px solid rgba(201, 255, 66, .25);
    border-radius: 999px;
    background: rgba(201, 255, 66, .06);
    color: var(--hqtk-lime);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .03em;
    white-space: nowrap
}

.hqtk-pill:before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor
}

.hqtk-page table.table td.hqtk-empty {
    padding: 36px 15px !important;
    color: var(--hqtk-muted) !important;
    text-align: center
}

/* ================= PAGINATION ================= */

.hqtk-page ul.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none
}

.hqtk-page ul.pagination li {
    display: inline-flex
}

.hqtk-page ul.pagination li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid rgba(201, 255, 66, .2);
    border-radius: 10px;
    background: rgba(17, 53, 29, .7);
    color: #dce8d9;
    font: 700 12.5px 'Space Grotesk', sans-serif;
    text-decoration: none;
    transition: .18s
}

.hqtk-page ul.pagination li a:hover {
    border-color: var(--hqtk-lime);
    color: var(--hqtk-lime);
    transform: translateY(-1px)
}

.hqtk-page ul.pagination li.active a {
    border-color: var(--hqtk-lime);
    background: linear-gradient(135deg, var(--hqtk-lime), #9aea28);
    color: #12210d;
    box-shadow: 0 8px 20px rgba(201, 255, 66, .16)
}

/* ================= RESPONSIVE ================= */

@media(max-width:1024px) {
    .hqtk-layout {
        grid-template-columns: minmax(0, 1fr)
    }
}

@media(max-width:640px) {
    .hqtk-page {
        padding: 16px 10px 42px
    }
    .hqtk-hero {
        padding: 22px 15px;
        border-radius: 16px
    }
    .hqtk-hero-icon {
        width: 52px;
        height: 52px;
        border-radius: 15px
    }
    .hqtk-hero-icon svg {
        width: 25px;
        height: 25px
    }
    .hqtk-card {
        padding: 14px;
        border-radius: 16px
    }
}








:root {
    --hqup-bg: #06150e;
    --hqup-soft: #0a1d13;
    --hqup-card: #0e2b1a;
    --hqup-line: rgba(201, 255, 66, .18);
    --hqup-line2: rgba(201, 255, 66, .48);
    --hqup-lime: #c9ff42;
    --hqup-text: #f4f9ec;
    --hqup-muted: #a6b8a5;
    --hqup-muted2: #708676;
    --hqup-shadow: 0 22px 60px rgba(0, 0, 0, .27)
}

.hqup-page,
.hqup-page * {
    box-sizing: border-box
}

.hqup-page {
    min-height: calc(100vh - 78px);
    padding: 28px clamp(14px, 2.4vw, 34px) 60px;
    overflow: hidden;
    color: var(--hqup-text);
    background: radial-gradient(circle at 8% 0, rgba(157, 255, 70, .09), transparent 28rem), radial-gradient(circle at 94% 20%, rgba(38, 149, 78, .09), transparent 30rem), linear-gradient(180deg, var(--hqup-bg), var(--hqup-soft) 50%, var(--hqup-bg));
    font-family: 'DM Sans', sans-serif
}

.hqup-page ::selection {
    background: rgba(201, 255, 66, .25)
}

.hqup-page .img-responsive {
    max-width: 100%;
    max-width: calc(1em + 3px);
    max-height: calc(1em + 3px);
    min-width: 1em
}

.hqup-container {
    width: 100%;
    max-width: 1100px;
    margin: auto
}

/* ================= PAGE HEAD ================= */

.hqup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px
}

.hqup-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--hqup-lime);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase
}

.hqup-head h1 {
    margin: 0 0 5px;
    color: var(--hqup-text);
    font: 700 clamp(23px, 2.6vw, 29px)/1.15 'Space Grotesk', sans-serif;
    letter-spacing: -.045em
}

.hqup-head p {
    margin: 0;
    color: var(--hqup-muted);
    font-size: 12px;
    line-height: 1.6
}

.hqup-page-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 36px;
    padding: 8px 14px;
    border: 1px solid var(--hqup-line);
    border-radius: 999px;
    background: rgba(16, 49, 28, .6);
    color: var(--hqup-muted);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap
}

.hqup-page-chip strong {
    color: var(--hqup-lime);
    font-family: 'Space Grotesk', sans-serif
}

/* ================= CARD ================= */

.hqup-card {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--hqup-line);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(16, 49, 28, .92), rgba(7, 24, 14, .95));
    box-shadow: var(--hqup-shadow)
}

.hqup-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px
}

/* ================= FILTER DROPDOWN ================= */

.hqup-page .dropdown {
    position: relative
}

.hqup-page #dropdownMenuButton {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 45px;
    padding: 10px 16px;
    border: 1px solid rgba(201, 255, 66, .3);
    border-radius: 12px;
    background: rgba(201, 255, 66, .07);
    color: var(--hqup-text);
    font: 700 13px 'DM Sans', sans-serif;
    cursor: pointer;
    transition: .18s
}

.hqup-page #dropdownMenuButton:after {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 2px;
    border-right: 2px solid var(--hqup-lime);
    border-bottom: 2px solid var(--hqup-lime);
    transform: rotate(45deg) translateY(-2px);
    content: ''
}

.hqup-page #dropdownMenuButton:hover {
    border-color: var(--hqup-lime);
    background: rgba(201, 255, 66, .13)
}

.hqup-page #dropdownMenuButton i {
    color: var(--hqup-lime);
    font-size: 13px
}

.hqup-page .dropdown-menu {
    position: absolute;
    z-index: 1200;
    top: calc(100% + 7px);
    left: 0;
    display: none;
    min-width: 230px;
    margin: 0;
    padding: 7px;
    list-style: none;
    border: 1px solid rgba(201, 255, 66, .22);
    border-radius: 13px;
    background: #102d1c;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .4)
}

.hqup-page .dropdown.show .dropdown-menu,
.hqup-page .dropdown-menu.show {
    display: block
}

.hqup-page .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 41px;
    padding: 9px 11px;
    border-radius: 9px;
    color: #dce8d9;
    font: 700 12.5px 'DM Sans', sans-serif;
    text-decoration: none;
    white-space: normal;
    transition: .18s
}

.hqup-page .dropdown-item i {
    flex: 0 0 15px;
    width: 15px;
    text-align: center;
    font-size: 12px
}

.hqup-page .dropdown-item:hover,
.hqup-page .dropdown-item:focus {
    background: rgba(201, 255, 66, .1);
    color: var(--hqup-lime);
    outline: 0
}

.hqup-page .dropdown-item.active {
    background: rgba(201, 255, 66, .1);
    color: var(--hqup-lime);
    box-shadow: inset 2.5px 0 0 var(--hqup-lime)
}

.hqup-page .dropdown-item.action-decreased { color: #8ef0a8 }
.hqup-page .dropdown-item.action-increased { color: #ffce6e }
.hqup-page .dropdown-item.action-activated { color: #7fdcf2 }
.hqup-page .dropdown-item.action-disabled  { color: #ff9d95 }

/* ================= TABLE ================= */

.hqup-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--hqup-line);
    border-radius: 14px;
    background: rgba(4, 20, 10, .4)
}

.hqup-table-wrap::-webkit-scrollbar {
    height: 7px
}

.hqup-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(201, 255, 66, .28);
    border-radius: 10px
}

.hqup-page table.table {
    width: 100%;
    min-width: 720px;
    margin: 0;
    border-collapse: collapse
}

.hqup-page table.table th,
.hqup-page table.table td {
    padding: 13px 15px;
    border: 0;
    border-bottom: 1px solid rgba(201, 255, 66, .08);
    vertical-align: middle;
    text-align: left
}

.hqup-page table.table thead th {
    border-bottom: 1px solid rgba(201, 255, 66, .14) !important;
    background: rgba(201, 255, 66, .05);
    color: var(--hqup-lime);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap
}

.hqup-page table.table tbody tr {
    transition: .15s
}

.hqup-page table.table tbody tr:hover {
    background: rgba(201, 255, 66, .045)
}

.hqup-page table.table tbody tr:last-child td {
    border-bottom: 0
}

.hqup-page table.table td {
    color: #d5dfd2;
    font-size: 12.5px;
    line-height: 1.55
}

.hqup-page table.table td:first-child {
    color: var(--hqup-lime);
    font: 700 12px 'Space Grotesk', sans-serif;
    white-space: nowrap
}

.hqup-page table.table td:nth-child(2) {
    color: var(--hqup-text);
    font-weight: 700
}

.hqup-page table.table td:nth-child(4) {
    color: var(--hqup-muted);
    white-space: nowrap
}

.hqup-page table.table th.width-service-name {
    width: 80px
}

.hqup-page table.table td.hqup-empty {
    padding: 40px 15px !important;
    color: var(--hqup-muted) !important;
    font-size: 12.5px;
    text-align: center
}

/* ================= ACTION BADGES ================= */

.hqup-page .badge-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border-radius: 999px;
    font: 800 10.5px 'DM Sans', sans-serif;
    letter-spacing: .03em;
    white-space: nowrap
}

.hqup-page .badge-action i {
    font-size: 10px
}

.hqup-page .badge-decreased {
    border: 1px solid rgba(126, 245, 155, .35) !important;
    background: rgba(126, 245, 155, .09) !important;
    color: #7ef59b !important
}

.hqup-page .badge-increased {
    border: 1px solid rgba(255, 206, 110, .4) !important;
    background: rgba(255, 206, 110, .09) !important;
    color: #ffce6e !important
}

.hqup-page .badge-activated {
    border: 1px solid rgba(127, 220, 242, .4) !important;
    background: rgba(127, 220, 242, .08) !important;
    color: #7fdcf2 !important
}

.hqup-page .badge-disabled {
    border: 1px solid rgba(255, 143, 130, .4) !important;
    background: rgba(255, 143, 130, .09) !important;
    color: #ff9d95 !important
}

.hqup-page .badge-action:not(.badge-decreased):not(.badge-increased):not(.badge-activated):not(.badge-disabled) {
    border: 1px solid var(--hqup-line2);
    background: rgba(201, 255, 66, .08);
    color: var(--hqup-lime)
}

/* ================= PAGINATION ================= */

.hqup-page .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none
}

.hqup-page .page-item {
    display: inline-flex
}

.hqup-page .btn-actions,
.hqup-page .page-item > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid rgba(201, 255, 66, .2);
    border-radius: 10px;
    background: rgba(17, 53, 29, .7);
    color: #dce8d9 !important;
    font: 700 12.5px 'Space Grotesk', sans-serif;
    text-decoration: none;
    transition: .18s
}

.hqup-page .btn-actions:hover,
.hqup-page .page-item > a:hover {
    border-color: var(--hqup-lime);
    color: var(--hqup-lime) !important;
    transform: translateY(-1px)
}

.hqup-page .page-item.active .btn-actions,
.hqup-page .page-item.active > a {
    border-color: var(--hqup-lime) !important;
    background: linear-gradient(135deg, var(--hqup-lime), #9aea28) !important;
    color: #12210d !important;
    box-shadow: 0 8px 20px rgba(201, 255, 66, .16)
}

/* ================= RESPONSIVE ================= */

@media(max-width:640px) {
    .hqup-page {
        padding: 16px 10px 42px
    }
    .hqup-head {
        align-items: flex-start;
        flex-direction: column
    }
    .hqup-card {
        padding: 13px;
        border-radius: 16px
    }
    .hqup-toolbar {
        flex-direction: column;
        align-items: stretch
    }
    .hqup-page #dropdownMenuButton {
        justify-content: space-between;
        width: 100%
    }
}













:root {
    --hqrp-bg: #06150e;
    --hqrp-soft: #0a1d13;
    --hqrp-card: #0e2b1a;
    --hqrp-line: rgba(201, 255, 66, .18);
    --hqrp-line2: rgba(201, 255, 66, .48);
    --hqrp-lime: #c9ff42;
    --hqrp-text: #f4f9ec;
    --hqrp-muted: #a6b8a5;
    --hqrp-muted2: #708676;
    --hqrp-shadow: 0 22px 60px rgba(0, 0, 0, .27)
}

.hqrp-page,
.hqrp-page * {
    box-sizing: border-box
}

.hqrp-page {
    min-height: calc(100vh - 78px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px clamp(14px, 2.4vw, 34px) 60px;
    overflow: hidden;
    color: var(--hqrp-text);
    background: radial-gradient(circle at 8% 0, rgba(157, 255, 70, .09), transparent 28rem), radial-gradient(circle at 94% 20%, rgba(38, 149, 78, .09), transparent 30rem), linear-gradient(180deg, var(--hqrp-bg), var(--hqrp-soft) 50%, var(--hqrp-bg));
    font-family: 'DM Sans', sans-serif
}

.hqrp-page ::selection {
    background: rgba(201, 255, 66, .25)
}

.hqrp-shell {
    width: 100%;
    max-width: 440px;
    margin: auto
}

/* ================= HERO ================= */

.hqrp-hero {
    position: relative;
    margin-bottom: 16px;
    padding: 26px 22px;
    overflow: hidden;
    border: 1px solid var(--hqrp-line);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(16, 49, 28, .92), rgba(7, 24, 14, .95));
    box-shadow: var(--hqrp-shadow);
    text-align: center
}

.hqrp-hero:before {
    content: '';
    position: absolute;
    left: 50%;
    top: -90px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(201, 255, 66, .06);
    transform: translateX(-50%);
    pointer-events: none
}

.hqrp-hero-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin: 0 auto 13px;
    border: 1px solid rgba(201, 255, 66, .4);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(201, 255, 66, .16), rgba(201, 255, 66, .05));
    color: var(--hqrp-lime);
    box-shadow: 0 14px 34px rgba(201, 255, 66, .14)
}

.hqrp-hero-icon svg {
    width: 29px;
    height: 29px
}

.hqrp-eyebrow {
    position: relative;
    display: block;
    margin-bottom: 5px;
    color: var(--hqrp-lime);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase
}

.hqrp-hero h1 {
    position: relative;
    margin: 0 0 7px;
    color: var(--hqrp-text);
    font: 700 clamp(23px, 2.6vw, 28px)/1.15 'Space Grotesk', sans-serif;
    letter-spacing: -.045em
}

.hqrp-hero p {
    position: relative;
    margin: 0;
    color: var(--hqrp-muted);
    font-size: 12px;
    line-height: 1.65
}

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

.hqrp-page .alert {
    position: relative !important;
    margin: 0 0 15px !important;
    padding: 14px 42px 14px 14px !important;
    border-radius: 14px !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    animation: hqrpFadeIn .3s ease-out
}

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

.hqrp-page .alert-success {
    border: 1px solid rgba(201, 255, 66, .35) !important;
    background: linear-gradient(145deg, rgba(14, 43, 24, .95), rgba(6, 25, 13, .98)) !important;
    color: #d8ffb0 !important
}

.hqrp-page .alert-danger {
    border: 1px solid rgba(255, 99, 99, .32) !important;
    background: linear-gradient(145deg, rgba(40, 12, 12, .92), rgba(22, 6, 6, .96)) !important;
    color: #ffd8d8 !important
}

.hqrp-page .alert .close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    display: grid !important;
    place-items: center !important;
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, .05) !important;
    color: inherit !important;
    font-size: 14px !important;
    line-height: 1 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    cursor: pointer !important;
    transition: .18s
}

.hqrp-page .alert .close:hover {
    background: rgba(255, 255, 255, .15) !important
}

/* ================= CARD + FORM ================= */

.hqrp-card {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--hqrp-line);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(16, 49, 28, .92), rgba(7, 24, 14, .95));
    box-shadow: var(--hqrp-shadow)
}

.hqrp-page .form-group {
    margin: 0 0 15px
}

.hqrp-page .control-label,
.hqrp-page label {
    display: block;
    margin: 0 0 7px;
    color: #dce7d9;
    font-size: 12px;
    font-weight: 700
}

.hqrp-page .form-control {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid rgba(201, 255, 66, .18);
    border-radius: 11px;
    background: rgba(3, 18, 9, .5);
    color: var(--hqrp-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
    outline: 0;
    font: 400 13px 'DM Sans', sans-serif;
    transition: .18s
}

.hqrp-page .form-control:focus {
    border-color: rgba(201, 255, 66, .68);
    box-shadow: 0 0 0 3px rgba(201, 255, 66, .075)
}

.hqrp-page .form-control::placeholder {
    color: var(--hqrp-muted2)
}

/* reCAPTCHA centering (widget itself rendered by Google) */

.hqrp-page .g-recaptcha {
    display: flex;
    justify-content: center;
    margin: 2px 0
}

.hqrp-page .g-recaptcha > div {
    margin: auto
}

@media(max-width:380px) {
    .hqrp-page .g-recaptcha > div {
        transform: scale(.92);
        transform-origin: center center
    }
}

/* Submit button */

.hqrp-page .btn-big-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 49px;
    padding: 12px 18px;
    border: 1px solid var(--hqrp-lime);
    border-radius: 11px;
    background: linear-gradient(135deg, var(--hqrp-lime), #a6ef2e);
    color: #10200d;
    box-shadow: 0 12px 28px rgba(201, 255, 66, .16);
    font: 800 14px 'DM Sans', sans-serif;
    cursor: pointer;
    transition: .2s
}

.hqrp-page .btn-big-primary:hover {
    transform: translateY(-2px);
    background: #dcff78;
    box-shadow: 0 16px 34px rgba(201, 255, 66, .23)
}

@media(max-width:640px) {
    .hqrp-page {
        padding: 24px 10px 42px;
        align-items: flex-start
    }
    .hqrp-hero {
        padding: 20px 15px;
        border-radius: 16px
    }
    .hqrp-hero-icon {
        width: 52px;
        height: 52px;
        border-radius: 15px
    }
    .hqrp-card {
        padding: 16px;
        border-radius: 16px
    }
}












:root {
    --hqfq-bg: #06150e;
    --hqfq-soft: #0a1d13;
    --hqfq-card: #0e2b1a;
    --hqfq-line: rgba(201, 255, 66, .18);
    --hqfq-line2: rgba(201, 255, 66, .48);
    --hqfq-lime: #c9ff42;
    --hqfq-text: #f4f9ec;
    --hqfq-muted: #a6b8a5;
    --hqfq-muted2: #708676;
    --hqfq-shadow: 0 22px 60px rgba(0, 0, 0, .27)
}

.hqfq-page,
.hqfq-page * {
    box-sizing: border-box
}

.hqfq-page {
    min-height: calc(100vh - 78px);
    padding: 28px clamp(14px, 2.4vw, 34px) 60px;
    overflow: hidden;
    color: var(--hqfq-text);
    background: radial-gradient(circle at 8% 0, rgba(157, 255, 70, .09), transparent 28rem), radial-gradient(circle at 94% 20%, rgba(38, 149, 78, .09), transparent 30rem), linear-gradient(180deg, var(--hqfq-bg), var(--hqfq-soft) 50%, var(--hqfq-bg));
    font-family: 'DM Sans', sans-serif
}

.hqfq-page ::selection {
    background: rgba(201, 255, 66, .25)
}

.hqfq-container {
    width: 100%;
    max-width: 780px;
    margin: auto
}

/* ================= HERO ================= */

.hqfq-hero {
    position: relative;
    margin-bottom: 18px;
    padding: 30px 22px;
    overflow: hidden;
    border: 1px solid var(--hqfq-line);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(16, 49, 28, .92), rgba(7, 24, 14, .95));
    box-shadow: var(--hqfq-shadow);
    text-align: center
}

.hqfq-hero:before {
    content: '';
    position: absolute;
    left: 50%;
    top: -90px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(201, 255, 66, .06);
    transform: translateX(-50%);
    pointer-events: none
}

.hqfq-hero-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 13px;
    border: 1px solid rgba(201, 255, 66, .4);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(201, 255, 66, .16), rgba(201, 255, 66, .05));
    color: var(--hqfq-lime);
    box-shadow: 0 14px 34px rgba(201, 255, 66, .14)
}

.hqfq-hero-icon svg {
    width: 30px;
    height: 30px
}

.hqfq-eyebrow {
    position: relative;
    display: block;
    margin-bottom: 6px;
    color: var(--hqfq-lime);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase
}

.hqfq-hero h1 {
    position: relative;
    margin: 0 0 8px;
    color: var(--hqfq-text);
    font: 700 clamp(24px, 2.8vw, 32px)/1.15 'Space Grotesk', sans-serif;
    letter-spacing: -.045em
}

.hqfq-hero p {
    position: relative;
    max-width: 500px;
    margin: 0 auto;
    color: var(--hqfq-muted);
    font-size: 12.5px;
    line-height: 1.7
}

/* ================= ACCORDION ================= */

.hqfq-list {
    display: grid;
    gap: 10px
}

.hqfq-item {
    overflow: hidden;
    border: 1px solid var(--hqfq-line);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(16, 49, 28, .92), rgba(7, 24, 14, .95));
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
    transition: border-color .18s
}

.hqfq-item:hover {
    border-color: rgba(201, 255, 66, .34)
}

.hqfq-q {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 15px 17px;
    border: 0;
    background: none;
    color: var(--hqfq-text);
    font: 700 13.5px/1.45 'DM Sans', sans-serif;
    text-align: left;
    cursor: pointer;
    transition: background .18s
}

.hqfq-q:hover {
    background: rgba(201, 255, 66, .045)
}

.hqfq-q[aria-expanded="true"] {
    background: rgba(201, 255, 66, .05);
    border-bottom: 1px solid rgba(201, 255, 66, .12)
}

.hqfq-q-num {
    flex: 0 0 auto;
    color: rgba(201, 255, 66, .45);
    font: 700 13px 'Space Grotesk', sans-serif;
    letter-spacing: .02em
}

.hqfq-q-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere
}

.hqfq-q[aria-expanded="true"] .hqfq-q-text {
    color: var(--hqfq-lime)
}

.hqfq-q-icon {
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(201, 255, 66, .3);
    border-radius: 9px;
    background: rgba(201, 255, 66, .07);
    color: var(--hqfq-lime);
    transition: .2s
}

.hqfq-q-icon svg {
    width: 13px;
    height: 13px
}

.hqfq-q[aria-expanded="true"] .hqfq-q-icon {
    background: var(--hqfq-lime);
    color: #12210d;
    transform: rotate(45deg)
}

.hqfq-q:focus-visible {
    outline: 2px solid rgba(201, 255, 66, .5);
    outline-offset: -2px
}

/* Answers: hidden unless bootstrap/fallback adds .show */

.hqfq-item .collapse {
    display: none
}

.hqfq-item .collapse.show {
    display: block
}

.hqfq-a-inner {
    padding: 14px 18px 17px 54px;
    color: #c9d6c6;
    font-size: 12.5px;
    line-height: 1.8;
    overflow-wrap: anywhere
}

.hqfq-a-inner p {
    margin: 0 0 8px
}

.hqfq-a-inner p:last-child {
    margin-bottom: 0
}

.hqfq-a-inner a {
    color: var(--hqfq-lime);
    font-weight: 700
}

/* ================= CTA ================= */

.hqfq-cta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 18px;
    padding: 19px;
    border: 1px solid rgba(201, 255, 66, .3);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(41, 82, 37, .9), rgba(12, 43, 23, .92));
    box-shadow: var(--hqfq-shadow)
}

.hqfq-cta-icon {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(201, 255, 66, .4);
    border-radius: 13px;
    background: rgba(201, 255, 66, .1);
    color: var(--hqfq-lime)
}

.hqfq-cta-icon svg {
    width: 21px;
    height: 21px
}

.hqfq-cta-copy {
    flex: 1 1 auto;
    min-width: 0
}

.hqfq-cta-copy strong {
    display: block;
    margin-bottom: 3px;
    color: var(--hqfq-text);
    font: 700 15px 'Space Grotesk', sans-serif;
    letter-spacing: -.02em
}

.hqfq-cta-copy span {
    color: var(--hqfq-muted);
    font-size: 11.5px
}

.hqfq-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 42px;
    padding: 10px 17px;
    border: 1px solid var(--hqfq-lime);
    border-radius: 11px;
    background: linear-gradient(135deg, var(--hqfq-lime), #a6ef2e);
    color: #10200d;
    box-shadow: 0 10px 24px rgba(201, 255, 66, .16);
    font: 800 12.5px 'DM Sans', sans-serif;
    text-decoration: none;
    transition: .2s
}

.hqfq-cta-btn:hover {
    transform: translateY(-2px);
    background: #dcff78;
    box-shadow: 0 14px 28px rgba(201, 255, 66, .22)
}

.hqfq-cta-btn svg {
    width: 15px;
    height: 15px
}

/* ================= RESPONSIVE ================= */

@media(max-width:640px) {
    .hqfq-page {
        padding: 16px 10px 42px
    }
    .hqfq-hero {
        padding: 22px 15px;
        border-radius: 16px
    }
    .hqfq-hero-icon {
        width: 52px;
        height: 52px;
        border-radius: 15px
    }
    .hqfq-hero-icon svg {
        width: 25px;
        height: 25px
    }
    .hqfq-q {
        padding: 13px 14px;
        gap: 10px;
        font-size: 12.5px
    }
    .hqfq-a-inner {
        padding: 12px 15px 15px 14px
    }
    .hqfq-cta {
        align-items: flex-start;
        flex-direction: column
    }
    .hqfq-cta-btn {
        width: 100%;
        justify-content: center
    }
}










.sb-blog,
.sb-blog * {
    box-sizing: border-box
}

.sb-blog {
    padding: 32px 0 55px;
    color: #f4f9ec;
    font-family: 'DM Sans', sans-serif
}

.sb-container {
    width: min(1180px, calc(100% - 30px));
    margin: 0 auto
}

/* ================= HERO ================= */

.sb-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    padding: clamp(34px, 5vw, 60px) 24px;
    border: 1px solid rgba(201, 255, 66, .18);
    border-radius: 28px;
    background: radial-gradient(circle at 50% -30%, rgba(157, 255, 70, .12), transparent 30rem), linear-gradient(145deg, rgba(20, 58, 33, .9), rgba(8, 27, 16, .94));
    box-shadow: 0 22px 60px rgba(0, 0, 0, .27);
    text-align: center
}

.sb-hero:before {
    content: '';
    position: absolute;
    left: -110px;
    bottom: -200px;
    width: 340px;
    height: 340px;
    border: 1px solid rgba(201, 255, 66, .06);
    border-radius: 50%;
    box-shadow: 0 0 0 48px rgba(201, 255, 66, .018), 0 0 0 96px rgba(201, 255, 66, .012)
}

.sb-hero:after {
    content: '';
    position: absolute;
    right: -120px;
    top: -190px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 255, 66, .1), transparent 68%)
}

.sb-hero-in {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto
}

.sb-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border: 1px solid rgba(201, 255, 66, .4);
    border-radius: 999px;
    background: rgba(201, 255, 66, .07);
    color: #c9ff42;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em
}

.sb-kicker:before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c9ff42;
    box-shadow: 0 0 10px #c9ff42
}

.sb-title {
    margin: 18px 0 14px;
    color: #f4f9ec;
    font: 700 clamp(32px, 5vw, 56px)/1.05 'Space Grotesk', sans-serif;
    letter-spacing: -.055em
}

.sb-title-accent {
    color: #c9ff42
}

.sb-desc {
    max-width: 660px;
    margin: 0 auto;
    color: #a6b8a5;
    font-size: 15px;
    line-height: 1.8
}

/* ================= ADMIN CONTENT BLOCKS ================= */

.sb-content-card {
    margin-bottom: 22px;
    padding: 20px;
    border: 1px solid rgba(201, 255, 66, .15);
    border-radius: 20px;
    background: rgba(9, 31, 18, .55);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
    color: #f4f9ec
}

/* ================= GRID ================= */

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

.sb-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
    border: 1px solid rgba(201, 255, 66, .16);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(16, 49, 28, .88), rgba(7, 24, 14, .94));
    box-shadow: 0 15px 36px rgba(0, 0, 0, .26);
    transition: .22s ease
}

.sb-card:hover {
    transform: translateY(-4px);
    border-color: rgba(201, 255, 66, .45);
    box-shadow: 0 22px 50px rgba(0, 0, 0, .34)
}

.sb-media {
    position: relative;
    display: block;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(20, 58, 33, .9), rgba(6, 21, 13, .95))
}

.sb-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease
}

.sb-card:hover .sb-media img {
    transform: scale(1.035)
}

.sb-media:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 58%, rgba(6, 21, 13, .65));
    pointer-events: none
}

.sb-media-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(201, 255, 66, .4);
    font-size: 34px
}

.sb-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 19px
}

.sb-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-bottom: 11px;
    color: #708676;
    font-size: 11px;
    font-weight: 700
}

.sb-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.sb-meta i {
    color: rgba(201, 255, 66, .65)
}

.sb-card-title {
    margin: 0 0 10px;
    color: #f4f9ec;
    font: 700 19px/1.35 'Space Grotesk', sans-serif;
    letter-spacing: -.025em
}

.sb-excerpt {
    display: -webkit-box;
    margin: 0 0 18px;
    overflow: hidden;
    color: #a6b8a5;
    font-size: 13px;
    line-height: 1.72;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical
}

.sb-read {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    margin-top: auto;
    padding: 4px 0;
    color: #c9ff42 !important;
    font-size: 12.5px;
    font-weight: 800;
    text-decoration: none !important;
    transition: .18s ease
}

.sb-read:hover {
    gap: 12px;
    color: #dcff78 !important
}

/* ================= EMPTY ================= */

.sb-empty {
    padding: 70px 20px;
    border: 1px dashed rgba(201, 255, 66, .3);
    border-radius: 22px;
    background: rgba(9, 31, 18, .5);
    color: #a6b8a5;
    text-align: center
}

.sb-empty i {
    display: block;
    margin-bottom: 12px;
    color: rgba(201, 255, 66, .55);
    font-size: 36px
}

.sb-empty h3 {
    margin: 0 0 7px;
    color: #f4f9ec;
    font: 700 19px 'Space Grotesk', sans-serif
}

.sb-empty p {
    margin: 0;
    font-size: 13px
}

/* ================= PAGINATION ================= */

.sb-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 28px
}

.sb-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 41px;
    height: 41px;
    padding: 0 12px;
    border: 1px solid rgba(201, 255, 66, .18);
    border-radius: 12px;
    background: rgba(9, 31, 18, .7);
    color: #f4f9ec !important;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none !important;
    transition: .18s ease
}

.sb-page:hover {
    border-color: #c9ff42;
    transform: translateY(-2px)
}

.sb-page.active {
    border-color: #c9ff42;
    background: #c9ff42;
    color: #12210d !important;
    box-shadow: 0 8px 20px rgba(201, 255, 66, .16)
}

/* ================= RESPONSIVE ================= */

@media (max-width: 980px) {
    .sb-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (max-width: 650px) {
    .sb-blog {
        padding-top: 18px
    }
    .sb-container {
        width: min(100% - 20px, 1180px)
    }
    .sb-hero {
        margin-bottom: 18px;
        padding: 26px 18px;
        border-radius: 22px
    }
    .sb-grid {
        grid-template-columns: 1fr;
        gap: 14px
    }
    .sb-card {
        border-radius: 18px
    }
    .sb-card-body {
        padding: 16px
    }
    .sb-title {
        font-size: 32px
    }
    .sb-desc {
        font-size: 13px
    }
    .sb-pagination {
        margin-top: 20px
    }
}













.sp-blog,
.sp-blog * {
    box-sizing: border-box
}

.sp-blog {
    padding: 30px 0 58px;
    color: #f4f9ec;
    font-family: 'DM Sans', sans-serif
}

.sp-container {
    width: min(920px, calc(100% - 30px));
    margin: 0 auto
}

.sp-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: #a6b8a5 !important;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none !important;
    transition: .18s ease
}

.sp-back:hover {
    color: #c9ff42 !important
}

.sp-article {
    overflow: hidden;
    border: 1px solid rgba(201, 255, 66, .18);
    border-radius: 28px;
    background: linear-gradient(160deg, rgba(14, 43, 25, .85), rgba(6, 21, 13, .95));
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3)
}

.sp-head {
    position: relative;
    overflow: hidden;
    padding: 36px 36px 30px;
    border-bottom: 1px solid rgba(201, 255, 66, .14);
    background: radial-gradient(circle at 92% -40%, rgba(157, 255, 70, .14), transparent 24rem), linear-gradient(135deg, rgba(22, 62, 35, .9), rgba(8, 27, 16, .95))
}

.sp-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid rgba(201, 255, 66, .4);
    border-radius: 999px;
    background: rgba(201, 255, 66, .07);
    color: #c9ff42;
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .08em
}

.sp-title {
    margin: 17px 0 15px;
    color: #f4f9ec;
    font: 700 clamp(31px, 5vw, 52px)/1.08 'Space Grotesk', sans-serif;
    letter-spacing: -.05em
}

.sp-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    color: #708676;
    font-size: 11px;
    font-weight: 750
}

.sp-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.sp-meta i {
    color: rgba(201, 255, 66, .65)
}

.sp-image {
    display: block;
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    background: rgba(6, 21, 13, .8)
}

.sp-content {
    padding: 34px 36px;
    color: #b9c9b3;
    font-size: 15px;
    line-height: 1.85;
    overflow-wrap: anywhere
}

.sp-content h1,
.sp-content h2,
.sp-content h3,
.sp-content h4 {
    margin: 1.6em 0 .65em;
    color: #f4f9ec;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.025em
}

.sp-content h2 {
    font-size: 27px
}

.sp-content h3 {
    font-size: 22px
}

.sp-content p {
    margin: 0 0 1.25em
}

.sp-content strong {
    color: #eaf3e2
}

.sp-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 15px auto;
    border: 1px solid rgba(201, 255, 66, .14);
    border-radius: 16px
}

.sp-content a {
    color: #c9ff42;
    text-decoration: underline;
    text-underline-offset: 3px
}

.sp-content a:hover {
    color: #dcff78
}

.sp-content blockquote {
    margin: 20px 0;
    padding: 16px 18px;
    border: 1px solid rgba(201, 255, 66, .22);
    border-left: 4px solid #c9ff42;
    border-radius: 0 14px 14px 0;
    background: rgba(201, 255, 66, .06);
    color: #d8e6cc
}

.sp-content pre {
    max-width: 100%;
    overflow: auto;
    padding: 16px;
    border: 1px solid rgba(201, 255, 66, .18);
    border-radius: 14px;
    background: #04100a;
    color: #d8e6cc
}

.sp-content ul,
.sp-content ol {
    padding-left: 1.3em;
    margin: 0 0 1.25em
}

.sp-content li {
    margin-bottom: .45em
}

.sp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 36px 27px;
    border-top: 1px solid rgba(201, 255, 66, .12)
}

.sp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 43px;
    padding: 0 16px;
    border: 0;
    border-radius: 13px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none !important;
    transition: .18s ease
}

.sp-btn-dark {
    background: #c9ff42;
    color: #12210d !important;
    box-shadow: 0 10px 24px rgba(201, 255, 66, .15)
}

.sp-btn-dark:hover {
    background: #dcff78;
    transform: translateY(-2px)
}

.sp-btn-soft {
    border: 1px solid rgba(201, 255, 66, .28);
    background: rgba(201, 255, 66, .06);
    color: #c9ff42 !important
}

.sp-btn-soft:hover {
    border-color: #c9ff42;
    transform: translateY(-2px)
}

/* ================= RELATED ================= */

.sp-related {
    margin-top: 27px
}

.sp-related-title {
    margin: 0 0 14px;
    color: #f4f9ec;
    font: 700 22px 'Space Grotesk', sans-serif;
    letter-spacing: -.03em
}

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

.sp-related-card {
    overflow: hidden;
    border: 1px solid rgba(201, 255, 66, .16);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(16, 49, 28, .88), rgba(7, 24, 14, .94));
    color: #f4f9ec !important;
    text-decoration: none !important;
    transition: .2s ease
}

.sp-related-card:hover {
    transform: translateY(-3px);
    border-color: rgba(201, 255, 66, .45);
    box-shadow: 0 15px 30px rgba(0, 0, 0, .3)
}

.sp-related-card img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    background: rgba(6, 21, 13, .8)
}

.sp-related-body {
    padding: 13px
}

.sp-related-name {
    display: -webkit-box;
    overflow: hidden;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.sp-related-meta {
    margin-top: 7px;
    color: #708676;
    font-size: 10px
}

@media (max-width: 720px) {
    .sp-blog {
        padding-top: 18px
    }
    .sp-container {
        width: min(100% - 20px, 920px)
    }
    .sp-article {
        border-radius: 21px
    }
    .sp-head,
    .sp-content {
        padding: 23px 19px
    }
    .sp-footer {
        align-items: stretch;
        padding: 15px 19px 22px
    }
    .sp-footer .sp-btn {
        width: 100%
    }
    .sp-title {
        font-size: 32px
    }
    .sp-content {
        font-size: 14px
    }
    .sp-related-grid {
        grid-template-columns: 1fr
    }
    .sp-related-card {
        display: grid;
        grid-template-columns: 120px minmax(0, 1fr)
    }
    .sp-related-card img {
        height: 100%;
        aspect-ratio: auto
    }
}