/*
 * Horizon — blue SMM panel theme (updates/2026-10-03_259), modelled on the user's reference screenshot:
 * white top bar with a blue wordmark, light-blue hero with blue mountain layers, white sign-in card,
 * blue "reasons" band with four icon cards. Titillium Web, rounded corners, soft shadows.
 * Built on Paper's templates (same platform contracts); prefix hz-, body "hz hz-in|hz-out hz-app|hz-site".
 * Platform widgets (Select2, order-form search, service fields, SweetAlert) are restyled at the end.
 */

/* 1. Tokens ------------------------------------------------------------ */
:root {
    /* Palette — seven base colours (header.twig can override them from themes.theme_config). */
    --hz-bg: #e9f2fc;          /* page */
    --hz-bar: #ffffff;         /* top bar + sidebar */
    --hz-surface: #ffffff;     /* cards */
    --hz-ink: #0c305b;         /* text (navy) */
    --hz-line-2: #d3e1f1;      /* borders */
    --hz-accent: #1e79e4;      /* buttons, links, active menu */
    --hz-brand: #1e79e4;       /* wordmark */
    --hz-on-accent: #ffffff;
    /* Derived */
    --hz-soft: color-mix(in srgb, var(--hz-accent) 4%, var(--hz-surface));
    --hz-field: color-mix(in srgb, var(--hz-accent) 5%, var(--hz-surface));
    --hz-line: color-mix(in srgb, var(--hz-line-2) 55%, var(--hz-surface));
    --hz-ink-2: color-mix(in srgb, var(--hz-ink) 78%, var(--hz-surface));
    --hz-ink-3: color-mix(in srgb, var(--hz-ink) 50%, var(--hz-surface));
    --hz-accent-2: color-mix(in srgb, var(--hz-accent) 86%, #000);
    --hz-accent-ink: var(--hz-accent);
    --hz-accent-soft: color-mix(in srgb, var(--hz-accent) 10%, var(--hz-surface));
    --hz-accent-line: color-mix(in srgb, var(--hz-accent) 30%, var(--hz-surface));
    --hz-btn-edge: var(--hz-accent);
    --hz-hatch: transparent;
    --hz-deco: transparent;
    --hz-row-hover: color-mix(in srgb, var(--hz-accent) 3%, var(--hz-surface));
    --hz-mtn-light: color-mix(in srgb, var(--hz-accent) 55%, var(--hz-bg));
    --hz-mtn-dark: color-mix(in srgb, var(--hz-accent) 88%, #000);
    --hz-ok: #13795b;
    --hz-ok-bg: #e5f6ef;
    --hz-err: #c2342b;
    --hz-err-bg: #fdecea;
    --hz-r: 8px;
    --hz-r-sm: 5px;
    --hz-control: 44px;
    --hz-sb-w: 256px;
    --hz-top-h: 60px;
    --hz-shadow: 0 1px 2px rgba(12, 48, 91, .05), 0 2px 10px rgba(12, 48, 91, .04);
    --hz-shadow-lg: 0 14px 36px rgba(12, 48, 91, .14);
    --hz-font: "Titillium Web", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --hz-mono: "Titillium Web", system-ui, sans-serif;
    --hz-ring: 0 0 0 3px color-mix(in srgb, var(--hz-accent) 20%, transparent);
}

/* 2. Base -------------------------------------------------------------- */
html body.hz {
    margin: 0;
    min-height: 100vh;
    background-color: var(--hz-bg);
    background-image: none;
    color: var(--hz-ink);
    font-family: var(--hz-font);
    font-size: 14.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}
body.hz *, body.hz *::before, body.hz *::after { box-sizing: border-box; }
body.hz [hidden] { display: none !important; }
:where(body.hz) a { color: var(--hz-accent-ink); text-decoration: none; }
:where(body.hz) a:hover { text-decoration: underline; }
body.hz h1, body.hz h2, body.hz h3 { margin: 0; color: var(--hz-ink); line-height: 1.25; font-family: var(--hz-font); }
body.hz p { margin: 0 0 12px; }
body.hz :focus-visible { outline: 2px solid var(--hz-accent); outline-offset: 2px; }
body.hz img { max-width: 100%; }
html.hz-nav-open, html.hz-nav-open body { overflow: hidden; }

.hz-mono { font-family: var(--hz-mono); }
.hz-muted { color: var(--hz-ink-3); }
.hz-small { margin-top: 4px; color: var(--hz-ink-3); font-size: 12px; }
.hz-small.is-err { color: var(--hz-err); }
.hz-break { overflow-wrap: anywhere; }
.hz-nowrap { white-space: nowrap; }
.hz-center { text-align: center; }
.hz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hz-count { margin-left: auto; min-width: 20px; padding: 0 6px; border: 1px solid var(--hz-btn-edge); background: var(--hz-accent); color: var(--hz-on-accent); font: 700 11px/18px var(--hz-font); font-style: normal; text-align: center; }

/* Brand */
.hz-brand { display: inline-flex; align-items: center; min-width: 0; color: var(--hz-brand) !important; font-weight: 700; font-size: 23px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none !important; }
.hz-brand img { display: block; max-height: 34px; width: auto; }
.hz-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hz-icon-btn { width: 36px; height: 36px; flex-shrink: 0; display: inline-grid; place-items: center; border: 1px solid transparent; background: transparent; color: var(--hz-ink-2) !important; font-size: 15px; cursor: pointer; text-decoration: none !important; }
.hz-icon-btn:hover { border-color: var(--hz-line-2); background: var(--hz-surface); color: var(--hz-ink) !important; }
.hz-avatar { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--hz-line-2); background: var(--hz-surface); color: var(--hz-brand); font-weight: 700; font-size: 14px; }

/* Dropdown menus (<details>) */
.hz-menu { position: relative; }
.hz-menu > summary { list-style: none; cursor: pointer; }
.hz-menu > summary::-webkit-details-marker { display: none; }
.hz-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 80; min-width: 220px; padding: 4px; background: var(--hz-surface); border: 1px solid var(--hz-line-2); box-shadow: var(--hz-shadow-lg); }
.hz-pop.is-left { left: 0; right: auto; }
.hz-pop a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; color: var(--hz-ink-2); font-size: 13px; text-decoration: none !important; }
.hz-pop a i { color: var(--hz-ink-3); }
.hz-pop a:hover, .hz-pop a.is-on { background: var(--hz-accent-soft); color: var(--hz-ink); }
.hz-pop a.is-danger, .hz-pop a.is-danger i { color: var(--hz-err); }
.hz-pop-user { padding: 9px 10px 11px; margin-bottom: 4px; border-bottom: 1px solid var(--hz-line-2); }
.hz-pop-user b, .hz-pop-user small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hz-pop-user small { color: var(--hz-ink-3); font-size: 12px; }
.hz-pop-head { padding: 9px 10px 3px; color: var(--hz-ink-3); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* Language picker: solid box, as in the reference */
.hz-lang > summary { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border: 1px solid var(--hz-line-2); color: var(--hz-ink); font-size: 13px; white-space: nowrap; }
.hz-lang > summary i { font-size: 10px; color: var(--hz-ink-2); }
.hz-lang > summary:hover { background: var(--hz-surface); }
.hz-lang .hz-pop { min-width: 160px; }

/* 3. App layout (signed in): sidebar + top bar ------------------------- */
.hz-sb {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 60;
    width: var(--hz-sb-w);
    display: flex; flex-direction: column;
    background: var(--hz-bar);
    border-right: 1px solid var(--hz-line);
    overflow-y: auto;
}
.hz-sb-top { height: var(--hz-top-h); flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 0 18px; border-bottom: 1px solid var(--hz-line); }
.hz-sb-close { display: none; margin-left: auto; }
.hz-sb-wallet { margin: 16px 14px 6px; padding: 12px 14px; display: grid; gap: 2px; background: var(--hz-surface); border: 1px solid var(--hz-line-2); color: var(--hz-ink) !important; text-decoration: none !important; }
.hz-sb-wallet-k { color: var(--hz-ink-3); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.hz-sb-wallet-v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hz-sb-wallet-add { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; color: var(--hz-accent-ink); font-size: 12px; font-weight: 600; }
.hz-sb-wallet:hover { border-color: var(--hz-brand); }
.hz-sb-nav { flex: 1 0 auto; padding: 0 10px 12px; }
.hz-sb-label { padding: 16px 10px 6px; color: var(--hz-ink-3); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.hz-sb-link { display: flex; align-items: center; gap: 11px; min-height: 38px; padding: 0 10px; border: 1px solid transparent; color: var(--hz-ink) !important; font-size: 12.5px; font-weight: 500; text-decoration: none !important; }
.hz-sb-link i { width: 16px; color: var(--hz-ink-2); font-size: 13px; text-align: center; }
.hz-sb-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hz-sb-link:hover { background: var(--hz-surface); border-color: var(--hz-line); }
.hz-sb-link.is-active { background: var(--hz-accent); border-color: var(--hz-btn-edge); color: var(--hz-on-accent) !important; font-weight: 600; }
.hz-sb-link.is-active i { color: var(--hz-on-accent); }
.hz-sb-link.is-active .hz-count { background: var(--hz-surface); }
.hz-sb-user { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--hz-line); }
.hz-sb-user-text { flex: 1; min-width: 0; }
.hz-sb-user-text b, .hz-sb-user-text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hz-sb-user-text b { font-size: 13px; }
.hz-sb-user-text small { color: var(--hz-ink-3); font-size: 11.5px; }
.hz-scrim { display: none; }

.hz-shell { margin-left: var(--hz-sb-w); min-height: 100vh; display: flex; flex-direction: column; }
.hz-top { position: sticky; top: 0; z-index: 40; height: var(--hz-top-h); display: flex; align-items: center; gap: 12px; padding: 0 28px; background: var(--hz-bar); border-bottom: 1px solid var(--hz-line); }
.hz-menu-btn, .hz-top-brand { display: none; }
.hz-top-hello { color: var(--hz-ink-2); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hz-top-hello b { color: var(--hz-ink); font-weight: 600; }
.hz-top-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.hz-balance { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--hz-line-2); background: var(--hz-surface); color: var(--hz-ink) !important; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-decoration: none !important; }
.hz-balance i { color: var(--hz-brand); font-size: 12px; }
.hz-balance:hover { border-color: var(--hz-brand); }
/* Balance = currency menu (updates 248): desktop dropdown; phones/tablets use the sidebar list */
.hz-balance-menu > summary.hz-balance { cursor: pointer; }
.hz-balance .hz-caret { margin-left: 2px; color: var(--hz-ink-3); font-size: 9px; }
.hz-balance-menu[open] > summary.hz-balance { border-color: var(--hz-brand); }
.hz-balance-link { display: none; }
.hz-curr-pop { min-width: 220px; }
.hz-curr-list { max-height: 300px; overflow-y: auto; }
.hz-curr-find { display: block; width: 100%; height: 34px; margin: 2px 0 6px; padding: 0 10px; border: 1px solid var(--hz-line-2); border-radius: var(--hz-r-sm); background: var(--hz-surface); color: var(--hz-ink); font: 13px var(--hz-font); }
.hz-curr-find:focus { outline: none; border-color: var(--hz-brand); box-shadow: var(--hz-ring); }
.hz-curr-none { margin: 0 !important; padding: 10px; color: var(--hz-ink-3); font-size: 12.5px; }
.hz-curr-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; color: var(--hz-ink-2); font-size: 13px; text-decoration: none !important; }
.hz-curr-opt b { min-width: 42px; color: var(--hz-ink); font-weight: 600; }
.hz-curr-opt span { color: var(--hz-ink-3); }
.hz-curr-opt i { margin-left: auto; color: var(--hz-brand); font-size: 11px; }
.hz-curr-opt.is-on { background: var(--hz-accent-soft); }
a.hz-curr-opt:hover { background: var(--hz-soft); color: var(--hz-ink); }
.hz-pop a.hz-pop-foot { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--hz-line-2); color: var(--hz-accent-ink); font-weight: 600; }
.hz-pop a.hz-pop-foot i { color: var(--hz-accent-ink); }
.hz-sb-curr { display: none; position: relative; padding: 0 14px; }
.hz-sb-curr .hz-sb-label { padding-left: 10px; padding-right: 10px; }
.hz-sb-curr-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--hz-line-2); background: var(--hz-surface); color: var(--hz-ink-3); font-size: 13px; }
.hz-sb-curr-btn b { color: var(--hz-ink); font-weight: 700; }
.hz-sb-curr-btn i { color: var(--hz-ink-2); font-size: 10px; }
.hz-sb-curr-menu[open] > .hz-sb-curr-btn { border-color: var(--hz-brand); }
.hz-sb-curr-menu > .hz-pop { left: 0; right: 0; min-width: 0; top: calc(100% + 4px); z-index: 70; }
.hz-sb-curr-menu .hz-curr-list { max-height: 45vh; }
.hz-avatar-btn { display: inline-flex; align-items: center; gap: 6px; color: var(--hz-ink-2); font-size: 10px; }
.hz-main { flex: 1 0 auto; padding: 28px; }
.hz-content { width: 100%; max-width: 1240px; margin: 0 auto; }
.hz-app-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding: 16px 28px; border-top: 1px solid var(--hz-line); background: var(--hz-bar); color: var(--hz-ink-3); font-size: 12.5px; }
.hz-app-foot nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.hz-app-foot nav a { color: var(--hz-ink-2); }

/* 4. Site layout (visitors): top bar as in the reference --------------- */
body.hz-site { display: flex; flex-direction: column; }
.hz-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.hz-site-head { position: sticky; top: 0; z-index: 40; background: var(--hz-bar); box-shadow: 0 1px 0 color-mix(in srgb, var(--hz-line-2) 70%, transparent), 0 2px 12px rgba(12, 48, 91, .04); }
.hz-site-row { height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.hz-site-start { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hz-site-end { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.hz-site-nav { display: flex; align-items: center; gap: 0; }
body.hz-site .hz-wrap { max-width: 1080px; }
.hz-site-nav a:last-child { padding-right: 0; }
.hz-site-nav a { padding: 8px 27px; color: var(--hz-ink) !important; font-size: 13.5px; font-weight: 400; white-space: nowrap; text-decoration: none !important; }
.hz-site-nav a:hover { color: var(--hz-accent) !important; }
.hz-site-nav a.is-active { color: var(--hz-accent) !important; }
.hz-site-more { display: none; margin-left: 6px; }
body.hz-site .hz-main { flex: 1 0 auto; padding: 40px 0 56px; }
.hz-site-foot { background: var(--hz-bar); border-top: 1px solid var(--hz-line); color: var(--hz-ink-3); font-size: 12.5px; }
.hz-foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding-top: 16px; padding-bottom: 16px; }
.hz-foot-row nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.hz-foot-row nav a { color: var(--hz-ink-2); }
.hz-curr { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hz-curr select { height: 30px; padding: 0 8px; border: 1px solid var(--hz-line-2); background: transparent; color: var(--hz-ink); font: inherit; }

/* Line drawings around the sign-in / sign-up / reset forms */
body.hz-deco .hz-main {
    padding-bottom: clamp(120px, 14vw, 220px) !important;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1900 230' preserveAspectRatio='none'%3E%3Cpolygon fill='%2383b5f0' points='0,83 250,148 410,153 700,160 920,127 1650,4 1900,82 1900,230 0,230'/%3E%3Cpolygon fill='%231e79e4' points='0,155 210,178 410,153 720,114 920,127 1000,133 1690,108 1900,154 1900,230 0,230'/%3E%3C/svg%3E") bottom center / 100% clamp(90px, 12vw, 230px) no-repeat,
        var(--hz-bg);
}

/* Landing = sign-in page (reference layout): hero + card over blue mountains, then the reasons band */
.hz-main.is-full { padding: 0 !important; }
.hz-main.is-full > .hz-wrap { max-width: none; padding: 0; }
.hz-hero { position: relative; overflow: hidden; background: var(--hz-bg); padding: 75px 0 64px; min-height: 420px; }
.hz-hero-row { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 417px; gap: 48px; align-items: start; max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.hz-hero-text { padding-top: 48px; }
.hz-hero-text h1 { max-width: 460px; margin: 0 0 12px !important; font-size: clamp(30px, 3vw, 38px) !important; font-weight: 700; line-height: 1.25 !important; }
.hz-hero-text p { margin: 0; font-size: 13.5px; color: var(--hz-ink); }
.hz-hero-card { padding: 24px 22px 22px; background: var(--hz-surface); border-radius: var(--hz-r); box-shadow: var(--hz-shadow-lg); }
.hz-hero-card form { display: grid; gap: 14px; }
.hz-hero-card .hz-field > label { font-size: 13.5px; font-weight: 600; }
.hz-pass-wrap { position: relative; }
.hz-pass-wrap .hz-input { padding-right: 130px; }
.hz-pass-wrap a { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 13.5px; }
.hz-hero-card .hz-btn { height: 42px; margin-top: 4px; }
.hz-hero-card .hz-after { margin-top: 2px; color: var(--hz-ink); }
.hz-mtn { position: absolute; left: 0; bottom: -1px; display: block; width: 100%; height: auto; aspect-ratio: 1900 / 230; pointer-events: none; }
.hz-mtn .is-l { fill: var(--hz-mtn-light); }
.hz-mtn .is-d { fill: var(--hz-accent); }
.hz-mtn .is-v { fill: var(--hz-bg); }
.hz-reasons { position: relative; overflow: hidden; padding: 52px 0 110px; background: linear-gradient(var(--hz-accent), var(--hz-mtn-dark)); color: #fff; text-align: center; }
.hz-reasons > .hz-mtn { aspect-ratio: 1900 / 211; }
.hz-reasons-in { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.hz-reasons h2 { margin: 0 0 8px !important; color: #fff !important; font-size: clamp(24px, 2.4vw, 30px) !important; font-weight: 700; }
.hz-reasons-in > p { margin: 0 0 46px; font-size: 13.5px; font-weight: 600; }
.hz-reason-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; text-align: left; }
.hz-reason { padding: 22px; background: var(--hz-surface); border-radius: var(--hz-r); box-shadow: var(--hz-shadow); color: var(--hz-ink); }
.hz-reason-ico { height: 94px; display: grid; place-items: center; margin-bottom: 16px; border-radius: var(--hz-r-sm); background: var(--hz-bg); color: var(--hz-accent); }
.hz-reason-ico svg { width: 74px; height: 74px; }
.hz-reason h3 { margin: 0 0 12px !important; font-size: 14.5px !important; font-weight: 700; }
.hz-reason p { margin: 0; font-size: 14px; line-height: 1.5; }
.hz-landing-foot { height: 40px; background: var(--hz-bg); }

/* Landing, part 2 (updates 272): how it works, testimonials, FAQ */
.hz-sec-in { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 0 20px; text-align: center; }
.hz-sec-title { margin: 0 0 8px !important; font-size: clamp(24px, 2.4vw, 30px) !important; font-weight: 700; }
.hz-sec-sub { margin: 0 auto 44px !important; max-width: 640px; font-size: 14px; }
.hz-how { position: relative; overflow: hidden; padding: 70px 0 clamp(120px, 11vw, 210px); background: var(--hz-bg); }
.hz-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; max-width: 920px; margin: 0 auto; padding-top: 44px; }
.hz-step { padding: 0 6px; }
.hz-step.is-up { transform: translateY(-40px); }
.hz-step-num { width: 64px; height: 64px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; background: var(--hz-surface); color: var(--hz-ink); font-size: 18px; font-weight: 700; box-shadow: var(--hz-shadow); }
.hz-step h3 { margin: 0 0 8px !important; font-size: 14.5px !important; font-weight: 700; }
.hz-step p { margin: 0 auto; max-width: 190px; font-size: 13.5px; line-height: 1.5; color: var(--hz-ink-2); }
.hz-arrow { position: absolute; width: 104px; height: 46px; fill: none; stroke: var(--hz-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.hz-arrow.is-1 { left: calc(12.5% + 34px); top: 10px; }
.hz-arrow.is-2 { left: calc(37.5% + 54px); top: 50px; }
.hz-arrow.is-3 { left: calc(62.5% + 34px); top: 10px; }
.hz-tst { position: relative; overflow: hidden; margin-top: -1px; padding: 6px 0 clamp(130px, 13vw, 220px); background: linear-gradient(var(--hz-accent), var(--hz-mtn-dark)); color: #fff; }
.hz-tst .hz-sec-title { color: #fff !important; }
.hz-tst .hz-sec-sub { font-weight: 600; }
.hz-tst-box { position: relative; max-width: 760px; margin: 0 auto; padding: 0 64px; }
.hz-tst-view { overflow: hidden; }
.hz-tst-track { display: flex; gap: 20px; transition: transform .45s ease; }
.hz-tst-card { flex: 0 0 calc((100% - 20px) / 2); margin: 0; padding: 20px; background: var(--hz-surface); border-radius: var(--hz-r-sm); color: var(--hz-ink); text-align: left; }
.hz-tst-card figcaption { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 14px; }
.hz-tst-av { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--hz-accent-soft); color: var(--hz-accent); font-weight: 700; }
.hz-tst-card blockquote { margin: 0; padding: 0; border: 0; font-size: 13.5px; line-height: 1.55; color: var(--hz-ink-2); }
.hz-tst-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: #fff; font-size: 26px; cursor: pointer; opacity: .9; }
.hz-tst-nav:hover { opacity: 1; }
.hz-tst-nav.is-prev { left: 4px; }
.hz-tst-nav.is-next { right: 4px; }
.hz-tst-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.hz-tst-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .45); cursor: pointer; }
.hz-tst-dots button.is-on { background: #fff; }
.hz-faq-sec { padding: 40px 0 70px; background: var(--hz-bg); }
.hz-faq-list { max-width: 620px; margin: 0 auto; display: grid; gap: 10px; text-align: left; }
.hz-faq-item { background: var(--hz-surface); border-radius: var(--hz-r-sm); box-shadow: var(--hz-shadow); }
.hz-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; cursor: pointer; list-style: none; font-size: 14.5px; font-weight: 700; color: var(--hz-ink); }
.hz-faq-item summary::-webkit-details-marker { display: none; }
.hz-faq-item summary::after { content: "+"; flex-shrink: 0; width: 20px; height: 20px; display: grid; place-items: center; border: 1.5px solid var(--hz-accent); border-radius: 50%; color: var(--hz-accent); font-size: 15px; font-weight: 600; line-height: 1; }
.hz-faq-item[open] summary::after { content: "\2212"; }
.hz-faq-item p { margin: 0; padding: 0 18px 16px; font-size: 14px; line-height: 1.6; color: var(--hz-ink-2); }
@media (max-width: 767px) { .hz-tst-card { flex-basis: 100%; } }

/* 5. Building blocks --------------------------------------------------- */
.hz-title-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin-bottom: 22px; }
.hz-title-row h1, .hz-h1 { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.hz-sub { margin: 4px 0 0 !important; color: var(--hz-ink-2); font-size: 14px; }
.hz-h2 { margin: 30px 0 14px !important; font-size: 17px; font-weight: 700; }
.hz-back { margin-bottom: 8px; font-size: 13px; }
.hz-label { margin: 18px 0 8px; color: var(--hz-ink-2); font-size: 13px; font-weight: 600; }

.hz-card { margin: 0 0 18px; padding: 22px; background: var(--hz-surface); border: 1px solid var(--hz-line-2); }
.hz-card-title { display: flex; align-items: center; gap: 10px; margin: 0 0 18px !important; padding-bottom: 12px; border-bottom: 1px solid var(--hz-line-2); font-size: 15px !important; font-weight: 700; }
.hz-title-ico { width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--hz-btn-edge); background: var(--hz-accent); color: var(--hz-on-accent); font-size: 12px; }
.hz-empty { color: var(--hz-ink-2); text-align: center; padding: 34px 20px; }
.hz-empty p { margin-bottom: 14px; }
.hz-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.hz-row p { margin: 0; }

.hz-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; }
.hz-stat { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--hz-surface); border: 1px solid var(--hz-line-2); color: var(--hz-ink) !important; text-decoration: none !important; }
a.hz-stat:hover { border-color: var(--hz-brand); }
.hz-stat small { display: block; color: var(--hz-ink-3); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.hz-stat b { display: block; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hz-stat-ico { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--hz-line-2); font-size: 17px; }
.hz-stat-ico.is-blue { background: var(--hz-accent-soft); color: var(--hz-brand); }
.hz-stat-ico.is-green { background: #edf6ef; color: #1d6b3f; }
.hz-stat-ico.is-amber { background: #fff6dc; color: #8a5a00; }
.hz-steps { margin: 0; padding-left: 20px; color: var(--hz-ink-2); }
.hz-steps li { margin: 6px 0; }

.hz-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.hz-side .hz-card:last-child { margin-bottom: 0; }
.hz-grid2 { column-count: 2; column-gap: 20px; }
.hz-grid2 > * { break-inside: avoid; }
.hz-narrow { max-width: 480px; margin: 8px auto 0; }
.hz-narrow > .hz-card { padding: 30px; }
.hz-narrow-card { max-width: 760px; }
.hz-doc { max-width: 840px; }
.hz-intro { margin-bottom: 18px; text-align: center; }
.hz-intro h1 { font-size: 26px; font-weight: 700; margin-bottom: 6px; }
.hz-after { margin: 16px 0 0; text-align: center; color: var(--hz-ink-2); font-size: 13px; }
.hz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; }

.hz-kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hz-line); font-size: 13.5px; }
.hz-kv:last-of-type { margin-bottom: 14px; }
.hz-kv span { color: var(--hz-ink-2); }
.hz-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 8px 0 0; font-size: 13.5px; }
.hz-dl dt { color: var(--hz-ink-2); }
.hz-dl dd { margin: 0; overflow-wrap: anywhere; }

/* Alerts */
.hz-alert { margin: 0 0 18px; padding: 11px 14px; border: 1px solid var(--hz-line-2); background: var(--hz-soft); font-size: 13.5px; }
.hz-alert.is-ok { border-color: #8fc4a2; background: var(--hz-ok-bg); color: var(--hz-ok); }
.hz-alert.is-err { border-color: #e5a29c; background: var(--hz-err-bg); color: var(--hz-err); }
.hz-alert.is-ok .hz-dl dt, .hz-alert.is-ok .hz-dl dd { color: var(--hz-ink); }

/* Buttons: orange with a thin dark edge, black text — as the reference's Sign in */
.hz-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 42px; padding: 0 18px;
    border: 1px solid var(--hz-btn-edge); border-radius: var(--hz-r-sm);
    background: var(--hz-accent); color: var(--hz-on-accent) !important;
    font: 600 13.5px/1 var(--hz-font); white-space: nowrap; text-decoration: none !important;
    cursor: pointer; transition: background .15s;
}
.hz-btn:hover { background: var(--hz-accent-2); }
.hz-btn:disabled { opacity: .55; cursor: not-allowed; }
.hz-btn i { font-size: 12px; }
.hz-btn-line { background: var(--hz-surface); border-color: var(--hz-line-2); color: var(--hz-ink) !important; }
.hz-btn-line:hover { background: var(--hz-soft); border-color: var(--hz-ink-2); }
.hz-btn-danger { background: var(--hz-surface); border-color: #d99a94; color: var(--hz-err) !important; }
.hz-btn-danger:hover { background: var(--hz-err-bg); border-color: var(--hz-err); }
.hz-btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; }
.hz-btn-lg { height: 46px; font-size: 14.5px; }
.hz-btn-block { display: flex; width: 100%; }

/* Forms */
.hz-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.hz-form > .hz-btn:not(.hz-btn-block) { justify-self: start; }
.hz-field { display: grid; gap: 7px; min-width: 0; }
.hz-field > label, .hz-field > .hz-label-row { color: var(--hz-ink); font-size: 13px; font-weight: 500; }
.hz-label-row { display: flex; justify-content: space-between; gap: 10px; }
.hz-input {
    width: 100%; height: var(--hz-control); padding: 0 12px;
    border: 1px solid var(--hz-line-2); border-radius: var(--hz-r-sm);
    background: var(--hz-surface); color: var(--hz-ink);
    font: 400 14px/1.4 var(--hz-font);
    transition: border-color .15s, box-shadow .15s;
}
textarea.hz-input { height: auto; min-height: 120px; padding: 10px 12px; resize: vertical; }
select.hz-input { padding-right: 8px; }
.hz-input:focus { outline: none; border-color: var(--hz-brand); box-shadow: var(--hz-ring); }
.hz-input[readonly] { background: var(--hz-soft); }
.hz-input + .hz-input { margin-top: 8px; }
.hz-input-ico { position: relative; }
.hz-input-ico > i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--hz-ink-3); font-size: 13px; pointer-events: none; }
.hz-input-ico > .hz-input { padding-left: 38px; }
.hz-code { font-size: 22px; letter-spacing: .35em; text-align: center; }
.hz-check { display: inline-flex; align-items: flex-start; gap: 8px; color: var(--hz-ink-2); font-size: 13px; cursor: pointer; }
.hz-check input, .hz-box { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--hz-brand); flex-shrink: 0; }
.hz-inline-form { display: flex; flex-wrap: wrap; gap: 10px; }
.hz-inline-form .hz-input { flex: 1 1 200px; width: auto; }
.hz-search { display: flex; gap: 8px; width: 100%; max-width: 380px; }
.hz-search .hz-input { flex: 1; min-width: 0; height: 38px; }
.hz-search .hz-btn { height: 38px; }
.hz-more { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hz-line-2); }
.hz-more summary { cursor: pointer; color: var(--hz-accent-ink); font-size: 13px; font-weight: 600; }
.hz-more form { margin-top: 14px; }

/* Filter tabs (status) */
.hz-filter { display: flex; gap: 6px; margin: 0 0 18px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.hz-filter::-webkit-scrollbar { display: none; }
.hz-filter a { flex-shrink: 0; padding: 6px 12px; border: 1px solid var(--hz-line-2); background: var(--hz-surface); color: var(--hz-ink-2); font-size: 12px; white-space: nowrap; text-decoration: none !important; }
.hz-filter a:hover { color: var(--hz-ink); border-color: var(--hz-ink-2); }
.hz-filter a.is-active { border-color: var(--hz-btn-edge); background: var(--hz-accent); color: var(--hz-on-accent); font-weight: 600; }
.hz-filter.is-inline { margin: 0; }

/* Tables — phones keep the table; the table box scrolls sideways */
.hz-table-wrap { position: relative; margin: 0 0 18px; overflow-x: auto; background: var(--hz-surface); border: 1px solid var(--hz-line-2); }
.hz-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hz-table th, .hz-table td { padding: 11px 12px; text-align: left; vertical-align: top; border-top: 1px solid var(--hz-line); }
.hz-table thead th { border-top: 0; border-bottom: 1px solid var(--hz-line-2); background: var(--hz-soft); color: var(--hz-ink-2); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.hz-table thead + tbody tr:first-child > * { border-top: 0; }
.hz-table tbody th { color: var(--hz-ink-2); font-weight: 600; width: 40%; }
.hz-table tbody tr:hover td { background: var(--hz-row-hover); }
.hz-table .hz-center { text-align: center; }
.hz-cat-row th { padding: 9px 12px !important; background: var(--hz-accent-soft) !important; color: var(--hz-brand) !important; font-size: 12.5px !important; width: auto !important; }
.hz-svccell { min-width: 180px; }
.hz-linkcell { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hz-table td .hz-btn-sm + .hz-btn-sm { margin-left: 6px; }
.hz-fav { margin-right: 6px; color: #d98a00; cursor: pointer; }
.hz-desc summary { cursor: pointer; }
.hz-desc[open] summary { font-weight: 600; }
.hz-desc .hz-prose { margin-top: 8px; padding: 10px 12px; border-left: 3px solid var(--hz-accent); background: var(--hz-soft); color: var(--hz-ink-2); font-size: 12.5px; white-space: normal; }

/* Status labels */
.hz-status { display: inline-block; padding: 1px 8px; border: 1px solid var(--hz-line); background: var(--hz-soft); color: var(--hz-ink-2); font-size: 11.5px; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.hz-status.s-pending { border-color: #e8c97a; background: #fff6dc; color: #8a5a00; }
.hz-status.s-inprogress, .hz-status.s-processing { border-color: #9ec0e8; background: #ebf3fd; color: #1f5fa8; }
.hz-status.s-completed { border-color: #8fc4a2; background: var(--hz-ok-bg); color: var(--hz-ok); }
.hz-status.s-partial { border-color: #c4a9e4; background: #f3ecfb; color: #6b3fa0; }
.hz-status.s-canceled, .hz-status.s-error, .hz-status.s-fail { border-color: #e5a29c; background: var(--hz-err-bg); color: var(--hz-err); }

/* Pager */
.hz-pager { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 18px; }
.hz-pager a, .hz-pager span { min-width: 34px; height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--hz-line-2); background: var(--hz-surface); color: var(--hz-ink-2); font-size: 13px; text-decoration: none !important; }
.hz-pager a:hover { border-color: var(--hz-brand); color: var(--hz-brand); }
.hz-pager .is-current { border-color: var(--hz-btn-edge); background: var(--hz-accent); color: var(--hz-on-accent); font-weight: 700; }

/* Text content */
.hz-prose { overflow-wrap: anywhere; }
.hz-prose > :last-child { margin-bottom: 0; }
.hz-prose a { text-decoration: underline; }
.hz-prose img { height: auto; }
.hz-prose table { border-collapse: collapse; }
.hz-prose td, .hz-prose th { padding: 6px 10px; border: 1px solid var(--hz-line); }
.hz-article { font-size: 14.5px; line-height: 1.75; }
.hz-article h2 { margin: 26px 0 10px; font-size: 19px; }
.hz-article h3 { margin: 22px 0 8px; font-size: 16px; }
.hz-hero-img { display: block; width: 100%; margin: 16px 0 22px; border: 1px solid var(--hz-line-2); }
.hz-pre { margin: 0 0 22px; padding: 16px 18px; overflow-x: auto; background: #1d1a17; color: #f4ede6; border: 1px solid #1d1a17; font: 12.5px/1.65 var(--hz-mono); }
code { font-family: var(--hz-mono); }

.hz-news article + article { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hz-line-2); }
.hz-news time { color: var(--hz-ink-3); font-size: 12px; }
.hz-news h3 { margin: 2px 0 6px; font-size: 14px; font-weight: 700; }
.hz-news .hz-prose { color: var(--hz-ink-2); font-size: 13px; }

.hz-faq details { margin-bottom: 10px; padding: 0 18px; background: var(--hz-surface); border: 1px solid var(--hz-line-2); }
.hz-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 0; cursor: pointer; font-weight: 600; list-style: none; }
.hz-faq summary::-webkit-details-marker { display: none; }
.hz-faq summary::after { content: "+"; flex-shrink: 0; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--hz-btn-edge); background: var(--hz-accent); color: var(--hz-on-accent); font-size: 16px; font-weight: 700; }
.hz-faq details[open] summary::after { content: "\2212"; }
.hz-faq details p { margin: 0 0 16px; color: var(--hz-ink-2); }

.hz-posts { display: grid; gap: 14px; }
.hz-post { padding: 18px 20px; background: var(--hz-surface); border: 1px solid var(--hz-line-2); }
.hz-post time { color: var(--hz-ink-3); font-size: 12px; }
.hz-post h2 { margin: 2px 0 6px; font-size: 17px; font-weight: 700; }
.hz-post h2 a { color: var(--hz-ink); }
.hz-post p { margin: 0; color: var(--hz-ink-2); }

/* Ticket thread */
.hz-thread { display: grid; gap: 12px; margin-bottom: 18px; }
.hz-msg { max-width: 88%; padding: 13px 16px; background: var(--hz-surface); border: 1px solid var(--hz-line-2); }
.hz-msg.is-me { justify-self: end; background: var(--hz-accent-soft); border-color: var(--hz-accent-line); }
.hz-msg-meta { margin-bottom: 6px; color: var(--hz-ink-3); font-size: 12px; }
.hz-msg-meta b { color: var(--hz-ink); }
.hz-msg-text { overflow-wrap: anywhere; white-space: pre-line; }

/* Services page (updates 254): toolbar, category icons, description dialog */
.hz-svc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -6px 0 18px; }
.hz-svc-tools .hz-svc-cat { flex: 1 1 260px; max-width: 420px; height: 40px; }
.hz-svc-tools .hz-search { flex: 1 1 240px; max-width: 380px; }
.hz-svc-curr { margin-left: auto; }
.hz-svc-curr > summary { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--hz-line-2); background: var(--hz-surface); color: var(--hz-ink-3); font-size: 13px; white-space: nowrap; }
.hz-svc-curr > summary b { color: var(--hz-ink); }
.hz-svc-curr > summary .fa-coins { color: var(--hz-brand); }
.hz-svc-curr[open] > summary { border-color: var(--hz-brand); }
.hz-cat-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 9px; vertical-align: middle; font-size: 15px; line-height: 1; }
.hz-cat-ico img { display: block; width: 20px; height: 20px; object-fit: contain; }
.hz-cat-ico i { color: var(--hz-brand); font-size: 15px; }
.hz-dialog { width: min(620px, calc(100vw - 32px)); max-width: none; max-height: min(82vh, 760px); margin: auto; padding: 0; border: 1px solid var(--hz-line-2); background: var(--hz-surface); color: var(--hz-ink); box-shadow: var(--hz-shadow-lg); font-family: var(--hz-font); }
.hz-dialog[open] { display: flex; flex-direction: column; }
.hz-dialog::backdrop { background: color-mix(in srgb, var(--hz-ink) 45%, transparent); }
.hz-dialog-head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; background: var(--hz-soft); border-bottom: 1px solid var(--hz-line-2); }
.hz-dialog-head h2 { flex: 1; margin: 4px 0 0 !important; font-size: 15px !important; font-weight: 700; line-height: 1.45 !important; overflow-wrap: anywhere; }
.hz-dialog-id { flex-shrink: 0; margin-top: 3px; padding: 1px 7px; border: 1px solid var(--hz-btn-edge); background: var(--hz-accent); color: var(--hz-on-accent); font-size: 12px; font-weight: 700; }
.hz-dialog-body { flex: 1 1 auto; min-height: 0; padding: 18px 16px; overflow-y: auto; font-size: 13.5px; }
.hz-dialog-meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 10px 12px; border: 1px solid var(--hz-line); background: var(--hz-soft); font-size: 13px; }
.hz-dialog-meta span { color: var(--hz-ink-2); }
.hz-dialog-meta i { color: var(--hz-brand); }
.hz-dialog-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--hz-line); }

/* Horizon shapes: rounded, soft, bordered lightly */
.hz-card, .hz-panel, .hz-table-wrap, .hz-stat, .hz-post, .hz-faq details, .hz-msg, .hz-sb-wallet, .hz-dialog, .hz-pop, .hz-pager a, .hz-pager span, .hz-alert, .hz-pre, .hz-hero-img { border-radius: var(--hz-r); }
.hz-card, .hz-table-wrap, .hz-stat, .hz-post, .hz-faq details, .hz-msg, .hz-sb-wallet { border-color: var(--hz-line) !important; box-shadow: var(--hz-shadow); }
.hz-btn, .hz-input, .hz-filter a, .hz-sb-link, .hz-balance, .hz-avatar, .hz-icon-btn, .hz-status, .hz-title-ico, .hz-stat-ico, .hz-count, .hz-lang > summary, .hz-sb-curr-btn, .hz-svc-curr > summary, .hz-curr-find, .hz-dialog-id, .hz-pop a, .hz-curr-opt { border-radius: var(--hz-r-sm); }
.hz-avatar { border-radius: 50%; }
.hz-input { background: var(--hz-field); border-color: color-mix(in srgb, var(--hz-line-2) 45%, var(--hz-field)); }
.hz-input:focus { background: var(--hz-surface); }
.hz-btn { font-weight: 700; font-size: 14px; }
.hz-sb { border-right-color: var(--hz-line); box-shadow: 1px 0 0 rgba(12, 48, 91, .02); }
.hz-sb-wallet { background: var(--hz-accent); border-color: var(--hz-accent) !important; color: #fff !important; }
.hz-sb-wallet .hz-sb-wallet-k, .hz-sb-wallet .hz-sb-wallet-add { color: rgba(255, 255, 255, .85); }
.hz-sb-link.is-active { box-shadow: 0 4px 12px color-mix(in srgb, var(--hz-accent) 30%, transparent); }
.hz-top { border-bottom-color: var(--hz-line); }
.hz-card-title { border-bottom-color: var(--hz-line); }
.hz-lang > summary { border-color: var(--hz-line-2); }
::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { border-radius: 10px; }

/* 6. Responsive -------------------------------------------------------- */
@media (max-width: 1200px) {
    .hz-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 1023px) {
    .hz-sb { transform: translateX(-100%); transition: transform .25s ease; }
    html.hz-nav-open .hz-sb { transform: none; box-shadow: var(--hz-shadow-lg); }
    .hz-scrim { position: fixed; inset: 0; z-index: 55; background: color-mix(in srgb, var(--hz-ink) 40%, transparent); }
    html.hz-nav-open .hz-scrim { display: block; }
    .hz-sb-close { display: inline-grid; }
    .hz-sb-curr { display: block; }
    .hz-balance-menu { display: none; }
    .hz-balance-link { display: inline-flex; }
    .hz-shell { margin-left: 0; }
    .hz-top { padding: 0 16px; gap: 8px; }
    .hz-menu-btn { display: inline-grid; margin-left: -6px; }
    .hz-top-brand { display: block; min-width: 0; }
    .hz-top-hello { display: none; }
    .hz-main { padding: 22px 16px; }
    .hz-app-foot { padding: 14px 16px; }
    .hz-site-nav { display: none; }
    .hz-site-more { display: block; }
}
@media (max-width: 900px) {
    .hz-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; padding-top: 0; }
    .hz-step.is-up { transform: none; }
    .hz-arrow { display: none; }
    .hz-hero-row { grid-template-columns: minmax(0, 1fr); gap: 26px; max-width: 560px; }
    .hz-hero-text { padding-top: 0; text-align: center; }
    .hz-reason-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .hz-grid2 { column-count: 1; }
    .hz-search { max-width: none; }
}
@media (max-width: 600px) {
    .hz-steps { grid-template-columns: minmax(0, 1fr); }
    .hz-how { padding-top: 46px; }
    .hz-sec-sub { margin-bottom: 28px !important; }
    .hz-tst-box { padding: 0 38px; }
    .hz-tst-nav { width: 34px; font-size: 20px; }
    .hz-tst-card { flex-basis: 100%; }
    .hz-hero { padding: 34px 0 70px; min-height: 0; }
    .hz-hero-card { padding: 20px 16px 18px; }
    .hz-reason-grid { grid-template-columns: minmax(0, 1fr); }
    .hz-reasons { padding: 40px 0 80px; }
    .hz-reasons-in > p { margin-bottom: 28px; }
    html body.hz { font-size: 13.5px; }
    .hz-top-new { display: none; }
    .hz-top .hz-lang { display: none; }
    .hz-top-brand .hz-brand-name { max-width: 130px; }
    .hz-balance { padding: 0 9px; font-size: 12px; }
    .hz-balance i { display: none; }
    .hz-brand { font-size: 17px; }
    .hz-wrap { padding: 0 14px; }
    .hz-site-row { gap: 8px; }
    .hz-site-start { gap: 8px; }
    .hz-lang > summary { padding: 0 7px; font-size: 12px; }
    body.hz-site .hz-main { padding: 26px 0 40px; }
    .hz-card { padding: 18px; }
    .hz-narrow > .hz-card { padding: 22px; }
    .hz-login { padding: 22px 18px 18px; }
    .hz-login-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .hz-landing { padding-top: 6px; }
    .hz-landing-sub { margin-bottom: 26px !important; font-size: 14px; }
    .hz-title-row h1, .hz-h1 { font-size: 22px; }
    .hz-stat { padding: 14px; }
    .hz-msg { max-width: 100%; }
    .hz-curr { margin-left: 0; }
    .hz-svc-curr { margin-left: 0; }
    .hz-svc-tools .hz-svc-cat, .hz-svc-tools .hz-search { max-width: none; }
    .hz-dialog-foot .hz-btn { flex: 1 1 auto; }
}
@media (max-width: 380px) {
    .hz-nav-cta { padding: 0 9px; margin-left: 4px; }
    .hz-lang { display: none; }
}

/* 6b. Scrollbars ------------------------------------------------------
   Square orange handle with the buttons' dark edge on a beige track. Chrome / Edge / Safari use the
   ::-webkit-scrollbar rules (the page scrollbar takes its style from body); Firefox can only colour them (the @supports block). Standard
   scrollbar-color must NOT reach Chromium: since Chrome 121 it switches the webkit styling off. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--hz-bar); }
::-webkit-scrollbar-thumb { background: var(--hz-accent); border: 1px solid var(--hz-btn-edge); }
::-webkit-scrollbar-thumb:hover { background: var(--hz-accent-2); }
::-webkit-scrollbar-thumb:active { background: var(--hz-brand); }
::-webkit-scrollbar-corner { background: var(--hz-bar); }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 15px; height: 15px; }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: var(--hz-bar); border-left: 1px solid var(--hz-line-2); }
html::-webkit-scrollbar-track:horizontal, body::-webkit-scrollbar-track:horizontal { border-left: 0; border-top: 1px solid var(--hz-line-2); }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { border: 3px solid var(--hz-bar); background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--hz-btn-edge); min-height: 48px; }
.hz-table-wrap::-webkit-scrollbar-track { border-top: 1px solid var(--hz-line); }
.hz-pre::-webkit-scrollbar-track, .hz-pre::-webkit-scrollbar-corner { background: #2a2622; }
/* Sidebar: slim, and only visible while the pointer is over it */
.hz-sb::-webkit-scrollbar { width: 6px; }
.hz-sb::-webkit-scrollbar-track { background: transparent; }
.hz-sb::-webkit-scrollbar-thumb { background: transparent; border: 0; }
.hz-sb:hover::-webkit-scrollbar-thumb { background: var(--hz-accent); border: 1px solid var(--hz-btn-edge); }
@supports not selector(::-webkit-scrollbar) {
    html { scrollbar-color: var(--hz-accent) var(--hz-bar); }
    .hz-table-wrap, .hz-pop, .select2-results__options, .search-menu, #dropdown-menu { scrollbar-width: thin; }
    .hz-pre { scrollbar-color: var(--hz-accent) #2a2622; }
    .hz-sb { scrollbar-width: thin; scrollbar-color: transparent transparent; }
    .hz-sb:hover { scrollbar-color: var(--hz-accent) transparent; }
}

/* 7. Platform-injected markup ------------------------------------------
   The global panel script turns the category / service selects into Select2, prepends a
   service search box to #order-form and renders each service's fields into #neworder_fields.
   -------------------------------------------------------------------- */
html body.hz {
    --custom-bg-primary-color: var(--hz-accent) !important;
    --custom-bg-secondary-color: var(--hz-surface) !important;
    --custom-bg-tertiary-color: var(--hz-soft) !important;
    --custom-text-primary-color: var(--hz-ink) !important;
    --custom-text-secondary-color: var(--hz-on-accent) !important;
    --custom-border-radius: var(--hz-r-sm) !important;
    --custom-height-control: var(--hz-control) !important;
}
html body.hz .form-group { margin: 0 0 14px; }
html body.hz #neworder_fields:empty { display: none; }
html body.hz #neworder_fields .form-group:last-child { margin-bottom: 0; }
html body.hz .form-group label.control-label,
html body.hz label[for="field_description"] { display: block !important; margin: 0 0 6px !important; color: var(--hz-ink) !important; font: 600 13.5px/1.4 var(--hz-font) !important; text-transform: none !important; letter-spacing: 0 !important; }
html body.hz .form-control {
    display: block; flex: 0 0 auto !important; width: 100% !important;
    height: var(--hz-control) !important; padding: 0 12px !important;
    border: 1px solid var(--hz-line-2) !important; border-radius: var(--hz-r-sm) !important;
    background: var(--hz-surface) !important; color: var(--hz-ink) !important;
    font: 400 15px/1.4 var(--hz-font) !important; box-shadow: none !important;
}
html body.hz textarea.form-control { height: auto !important; min-height: 110px; padding: 10px 12px !important; }
html body.hz .form-control:focus { outline: none !important; border-color: var(--hz-accent) !important; box-shadow: var(--hz-ring) !important; }
html body.hz .form-control[readonly] { background: var(--hz-soft) !important; }
html body.hz .help-block { display: block; margin-top: 5px; color: var(--hz-ink-3); font-size: 12.5px; }
html body.hz #field_description,
html body.hz .panel-body.border-solid.border-rounded,
html body.hz div[name="field_description"] {
    width: 100% !important; height: auto !important; min-height: 40px !important; margin: 0 !important; padding: 10px 12px !important;
    border: 1px solid var(--hz-line) !important; border-left: 3px solid var(--hz-accent) !important; border-radius: var(--hz-r-sm) !important;
    background: var(--hz-soft) !important; color: var(--hz-ink-2) !important;
    font: 400 13.5px/1.6 var(--hz-font) !important; white-space: pre-wrap !important; overflow-wrap: anywhere; box-shadow: none !important;
}
html body.hz #dripfeed { padding: 12px 14px; border: 1px solid var(--hz-line); border-radius: var(--hz-r-sm); background: var(--hz-soft); }
html body.hz #order_check label { display: inline-flex !important; align-items: center; gap: 8px; margin: 0 !important; font-weight: 600; font-size: 14px; cursor: pointer; }
html body.hz #dripfeedcheckbox { width: 16px; height: 16px; margin: 0; accent-color: var(--hz-accent); }
html body.hz #dripfeed-options { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
html body.hz #dripfeed-options.hidden { display: none !important; }
html body.hz #dripfeed-options .form-group { margin: 0; }
@media (max-width: 640px) { html body.hz #dripfeed-options { grid-template-columns: 1fr; } }
html body.hz .row { display: flex; flex-wrap: wrap; margin: 0 -6px; }
html body.hz .row > [class*="col-"] { flex: 1 1 200px; padding: 0 6px; }

/* Ticket v2 injects bare inputs into #ticketsData */
html body.hz #ticketsData:not(:empty) { display: grid; gap: 10px; }
html body.hz #ticketsData label { display: block; font-size: 13.5px; font-weight: 600; }
html body.hz #ticketsData input, html body.hz #ticketsData select, html body.hz #ticketsData textarea { width: 100%; height: var(--hz-control); margin-top: 4px; padding: 0 12px; border: 1px solid var(--hz-line-2); border-radius: var(--hz-r-sm); background: var(--hz-surface); color: var(--hz-ink); font: inherit; }
html body.hz #ticketsData textarea { height: auto; min-height: 90px; padding: 10px 12px; }

/* Select2 */
html body.hz select.form-control.select2-hidden-accessible { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; }
html body.hz .select2-container { width: 100% !important; max-width: 100%; min-width: 0; font-family: var(--hz-font); }
html body.hz select.form-control { max-width: 100%; min-width: 0; text-overflow: ellipsis; }
html body.hz .select2-container .select2-selection--single {
    display: flex !important; align-items: center !important; height: var(--hz-control) !important; padding: 0 34px 0 12px !important;
    border: 1px solid var(--hz-line-2) !important; border-radius: var(--hz-r-sm) !important;
    background: var(--hz-surface) !important; color: var(--hz-ink) !important; box-shadow: none !important; outline: none !important;
}
html body.hz .select2-container--open .select2-selection--single,
html body.hz .select2-container--focus .select2-selection--single { border-color: var(--hz-accent) !important; box-shadow: var(--hz-ring) !important; }
/* Long names (updates 244): the chosen text is one line cut off with an ellipsis, never wider than the box.
   It was a flex row whose parts could not shrink, so a long category or service pushed the form out of its card. */
html body.hz .select2-container .select2-selection--single > .select2-selection__rendered { flex: 1 1 auto; min-width: 0; }
html body.hz .select2-selection__rendered { display: block !important; min-width: 0; padding: 0 !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; line-height: calc(var(--hz-control) - 2px) !important; background: transparent !important; color: var(--hz-ink) !important; font-size: 14px; }
html body.hz .select2-selection__rendered * { display: inline !important; white-space: nowrap !important; }
html body.hz .select2-selection__rendered img { display: inline-block !important; vertical-align: middle; }
html body.hz .select2-container .select2-selection__arrow { position: absolute !important; top: 0 !important; right: 10px !important; bottom: 0 !important; height: auto !important; width: 16px !important; display: flex; align-items: center; justify-content: center; }
html body.hz .select2-container .select2-selection__arrow b { position: static !important; margin: 0 !important; border-width: 5px 4px 0 !important; border-color: var(--hz-ink-3) transparent transparent !important; }
html body.hz .select2-selection__icon { margin-right: 8px !important; }
html body.hz .select2-selection__icon img { width: 20px; height: 20px; object-fit: contain; }
html body.hz span.select2-selection__id { margin-right: 8px; padding: 0 6px !important; border: 1px solid var(--hz-accent-line) !important; border-radius: var(--hz-r-sm) !important; background: var(--hz-accent-soft) !important; color: var(--hz-accent-ink) !important; font: 600 12px/1.5 var(--hz-mono) !important; }
html body.hz .select2-dropdown { margin-top: 4px !important; border: 1px solid var(--hz-line-2) !important; border-radius: var(--hz-r-sm) !important; background: var(--hz-surface) !important; box-shadow: var(--hz-shadow-lg) !important; overflow: hidden !important; z-index: 1060; }
html body.hz .select2-dropdown--above { margin-top: -4px !important; }
html body.hz .select2-search--dropdown { padding: 8px !important; }
html body.hz .select2-search--dropdown .select2-search__field { height: 36px; padding: 0 10px !important; border: 1px solid var(--hz-line-2) !important; border-radius: 6px !important; font-size: 14px; outline: none !important; }
html body.hz .select2-results > .select2-results__options { max-height: 320px !important; }
html body.hz .select2-results__option { white-space: normal !important; overflow-wrap: anywhere; padding: 9px 12px !important; background: transparent !important; color: var(--hz-ink) !important; font-size: 14px !important; line-height: 1.45 !important; }
html body.hz .select2-results__option--highlighted { background: var(--hz-soft) !important; }
html body.hz .select2-results__option--selected,
html body.hz .select2-results__option[aria-selected="true"] { background: var(--hz-accent-soft) !important; font-weight: 600 !important; }
html body.hz .select2-rendered__match { background: #fff1b8 !important; color: inherit !important; }

/* Service search box (prepended to #order-form) */
html body.hz .search-dropdown { position: relative; margin: 0 !important; }
html body.hz .search-dropdown .input-wrapper { position: relative; }
html body.hz .search-dropdown .input-wrapper .form-control,
html body.hz #search-input { padding: 0 38px !important; }
html body.hz .search-dropdown .input-wrapper .input-wrapper__prepend,
html body.hz .search-dropdown .input-wrapper .input-wrapper__append { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 2; padding: 0 !important; border: 0 !important; background: none !important; color: var(--hz-ink-3) !important; font-size: 14px !important; line-height: 1 !important; }
html body.hz .search-dropdown .input-wrapper .input-wrapper__prepend { left: 13px !important; }
html body.hz .search-dropdown .input-wrapper .input-wrapper__append { right: 13px !important; cursor: pointer; }
html body.hz .search-menu,
html body.hz #dropdown-menu { position: absolute !important; top: calc(100% + 4px) !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 1060 !important; max-height: 340px; overflow-y: auto !important; padding: 4px !important; background: var(--hz-surface) !important; border: 1px solid var(--hz-line-2) !important; border-radius: var(--hz-r-sm) !important; box-shadow: var(--hz-shadow-lg) !important; }
html body.hz .search-list, html body.hz #dropdown-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
html body.hz .search-list li { white-space: normal !important; overflow-wrap: anywhere; padding: 9px 10px !important; border-radius: 6px !important; color: var(--hz-ink) !important; font-size: 14px !important; line-height: 1.45 !important; cursor: pointer !important; }
html body.hz .search-list li:hover { background: var(--hz-soft) !important; }
html body.hz .search-list li small { color: var(--hz-ink-3) !important; }
html body.hz .search-list b, html body.hz .highlight { background: #fff1b8 !important; color: inherit !important; }

/* Server-injected payment buttons (add funds) */
html body.hz #button_field button,
html body.hz #button_field input[type="submit"],
html body.hz #button_field .btn { display: flex; align-items: center; justify-content: center; width: 100%; height: var(--hz-control); padding: 0 18px; border: 1px solid var(--hz-btn-edge) !important; border-radius: var(--hz-r-sm) !important; background: var(--hz-accent) !important; color: var(--hz-on-accent) !important; font: 600 14px/1 var(--hz-font) !important; cursor: pointer; box-shadow: none !important; }

/* SweetAlert2 */
html body.hz .swal2-popup { border-radius: var(--hz-r) !important; font-family: var(--hz-font) !important; }
html body.hz .swal2-title { color: var(--hz-ink) !important; font-size: 20px !important; }
html body.hz .swal2-styled.swal2-confirm { border-radius: var(--hz-r-sm) !important; background: var(--hz-accent) !important; box-shadow: none !important; }
html body.hz .swal2-styled.swal2-cancel { border-radius: var(--hz-r-sm) !important; }