/* vemoni.info/customtag/ — in the /pr/ look (body.prl + /assets/pr-look.css): near-black ground,
   hairline rules, light pill buttons. styles.css pads every <section>; .ct-main > section resets it. */
/* the homepage's star field behind the top of the page (/pr/cosmos.js fades it out on scroll) */
body.prl { isolation: isolate; }
.prl { background: transparent; }
html:has(body.prl) { background: #0a0a0c; }
.pr-cosmos { position: fixed; inset: 0 0 auto; height: var(--cosmos-height, 760px); z-index: -1; pointer-events: none; overflow: hidden; opacity: var(--cosmos-opacity, 1); background: #060709; }
.pr-cosmos canvas { display: block; width: 100%; height: 100%; }
.pr-cosmos::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 12, .04) 0%, rgba(10, 10, 12, .08) 35%, rgba(10, 10, 12, .6) 70%, var(--bg, #0a0a0c) 100%); }
/* the top row sits right on the star field: no bar, no rule */
.prl .nav.ct-nav { position: static; background: transparent; border-bottom: 0; }
/* as on the homepage: the row spans the whole window — the name at the left edge, the actions at the right,
   a gutter that grows with the screen — instead of being held in the page's column */
.prl .nav.ct-nav .nav-inner { max-width: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 18px clamp(20px, 3.2vw, 56px); }
.prl .nav.ct-nav .brand-name { font-size: 24px; line-height: 1; letter-spacing: -.025em; }
/* the last two differences from the homepage's row: its height and the language switch's ground */
.prl .nav.ct-nav .nav-inner { min-height: 78px; box-sizing: border-box; }
.prl .nav.ct-nav .lang-switch { background: rgba(10, 10, 12, .65); }
.ct-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.ct-brand-ic { display: block; line-height: 0; }
/* the logo beside the name: white sparkles — 30px in the top row, 24px in the footer (26 / 22 on phones) */
.ct-logo { display: block; width: 30px; height: 30px; flex: none; object-fit: contain; }
.ct-page-footer .ct-logo { width: 24px; height: 24px; }
/* over the title: the animated tag plates (275×168 drawn at half size, 64px high on phones); the plates
   carry their own shadow at the bottom, so the gap to the title is a little smaller than it looks */
.ct-hero-tags { display: flex; justify-content: center; line-height: 0; margin: 0 0 24px; }
.ct-hero-tags img { display: block; width: 138px; height: 84px; }

.ct-main { max-width: 860px; margin: 0 auto; padding: 12px 24px 48px; }
.ct-main > section { padding: 0; }

/* the top block: centred — the plates, the title and the lead */
.ct-head { margin: 0 0 34px; text-align: center; }
.ct-head h1 { font-weight: 700; font-size: clamp(36px, 6vw, 60px); line-height: 1.06; letter-spacing: -.035em; margin: 0 auto 16px; text-wrap: balance; overflow-wrap: anywhere; }
.ct-lead { font-size: 17px; line-height: 1.6; color: var(--ink-soft, #a3a3ad); max-width: 640px; margin: 0 auto; text-wrap: pretty; }

/* the dashboard */
.ct-dash { margin: 0 0 56px; }
.ct-card { border: 1px solid var(--line-2, rgba(255, 255, 255, .17)); border-radius: 18px; padding: 24px; background: rgba(10, 10, 12, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ct-loading { min-height: 140px; background: linear-gradient(100deg, rgba(255, 255, 255, .02) 40%, rgba(255, 255, 255, .06) 50%, rgba(255, 255, 255, .02) 60%) 0 0 / 200% 100%; animation: ct-shine 1.4s linear infinite; }
@keyframes ct-shine { to { background-position: -200% 0; } }
.ct-login { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.ct-login p { margin: 0; color: var(--ink-soft, #a3a3ad); max-width: 460px; line-height: 1.55; }
.ct-muted { margin: 0; color: var(--ink-soft, #a3a3ad); }

.ct-lbl { display: block; font-size: 13px; color: var(--ink-soft, #a3a3ad); margin: 20px 0 10px; }
.ct-form > .ct-lbl:first-child { margin-top: 0; }
.ct-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ct-tagbox { display: flex; align-items: center; gap: 12px; box-sizing: border-box; flex: 1 1 220px; min-width: 0; height: 60px; padding: 0 16px; border: 1px solid var(--line-2, rgba(255, 255, 255, .17)); border-radius: 14px; background: rgba(0, 0, 0, .35); cursor: text; }
.ct-tagbox:focus-within { border-color: #f2f2f4; }
.ct-tagbox #ctPrev { line-height: 0; flex: none; }
.ct-tagbox input { flex: 1; width: 0; min-width: 0; background: none; border: 0; outline: 0; padding: 0; color: #f2f2f4; font: inherit; font-size: 24px; font-weight: 700; letter-spacing: .03em; }
.ct-tagbox input::placeholder { color: rgba(255, 255, 255, .22); }
.ct-go { height: 60px; padding: 0 30px !important; font-size: 16px !important; }
.ct-row .btn-ghost { height: 60px; }
.ct-hint { font-size: 13px; color: var(--ink-soft, #a3a3ad); margin: 8px 0 0; }
.ct-grid { display: grid; grid-template-columns: repeat(auto-fill, 56px); gap: 8px; }
.ct-grid.sm { grid-template-columns: repeat(auto-fill, 44px); gap: 7px; }
.ct-tile { width: 56px; height: 56px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line-2, rgba(255, 255, 255, .17)); border-radius: 12px; background: rgba(0, 0, 0, .3); cursor: pointer; transition: border-color .15s, background .15s; }
.ct-tile.sm { width: 44px; height: 44px; border-radius: 10px; }
.ct-tile:hover { border-color: rgba(255, 255, 255, .45); }
.ct-tile.on { border-color: #f2f2f4; background: rgba(255, 255, 255, .08); }
.ct-bsvg { display: block; image-rendering: pixelated; }
.ct-bfall { display: block; border-radius: 4px; background: rgba(255, 255, 255, .12); }
/* the custom-colours popout (the eyedropper tile at the end of the colour row) */
.ct-eye { color: var(--ink-soft, #a3a3ad); }
.ct-eye:hover, .ct-eye.on { color: #f2f2f4; }
.ct-pickwrap { position: relative; display: block; width: 44px; height: 44px; }
.ct-pick { position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 30; width: 256px; box-sizing: border-box; padding: 14px; background: #16161a; border: 1px solid var(--line-2, rgba(255, 255, 255, .17)); border-radius: 14px; box-shadow: 0 22px 48px -14px rgba(0, 0, 0, .85); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; cursor: default; }
.ct-pick * { box-sizing: border-box; }
.ct-pick-t { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft, #a3a3ad); }
.ct-pick-bars { display: flex; gap: 8px; }
.ct-pick-col { flex: 1 1 0; min-width: 0; display: grid; gap: 6px; justify-items: center; font-size: 12px; color: var(--ink-soft, #a3a3ad); }
.ct-pick-col span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-pick-bar { width: 100%; height: 40px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.ct-pick-bar.on { border-color: #f2f2f4; }
.ct-pick-bars .ct-pick-col:only-child .ct-pick-bar { cursor: default; border-color: transparent; }
.ct-sv { position: relative; height: 150px; border-radius: 8px; cursor: crosshair; touch-action: none; background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, var(--hue)); }
.ct-sv i { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); pointer-events: none; }
.ct-hue { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 999px; margin: 0; padding: 0; border: 0; cursor: pointer; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.ct-hue::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 18px; border-radius: 4px; background: #fff; border: 1px solid rgba(0, 0, 0, .4); }
.ct-hue::-moz-range-thumb { width: 10px; height: 18px; border-radius: 4px; background: #fff; border: 1px solid rgba(0, 0, 0, .4); }
.ct-pick-hex { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 8px 0 12px; border: 1px solid var(--line-2, rgba(255, 255, 255, .17)); border-radius: 10px; background: rgba(0, 0, 0, .35); color: var(--ink-soft, #a3a3ad); }
.ct-pick-hex:focus-within { border-color: #f2f2f4; }
.ct-pick-hex input { flex: 1; width: 0; min-width: 0; background: none; border: 0; outline: 0; padding: 0; color: #f2f2f4; font: inherit; font-size: 15px; }
.ct-pick-hex button { background: none; border: 0; color: var(--ink-soft, #a3a3ad); cursor: pointer; display: grid; place-items: center; padding: 4px; }
.ct-pick-hex button:hover { color: #f2f2f4; }
.ct-err { margin: 16px 0 0; color: #ff8f8f; font-size: 14px; line-height: 1.5; }

/* the server the user has */
.ct-server { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ct-server + .ct-form { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line, rgba(255, 255, 255, .1)); }
.ct-sv-ic { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: rgba(0, 0, 0, .4); border: 1px solid var(--line-2, rgba(255, 255, 255, .17)); overflow: hidden; flex: none; }
.ct-sv-ic img { width: 100%; height: 100%; object-fit: cover; }
.ct-sv-n { flex: 1 1 220px; min-width: 0; }
.ct-sv-n > b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.ct-sv-m { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-top: 8px; }
.ct-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 7px; border: 1px solid var(--line-2, rgba(255, 255, 255, .17)); border-radius: 7px; font-size: 13px; line-height: 1; }
.ct-chip b { font-weight: 700; letter-spacing: .03em; }
.ct-st { font-size: 13px; line-height: 1.45; color: var(--ink-soft, #a3a3ad); }
.ct-st.ok { color: #7ee2a8; }
.ct-st.bad { color: #f87171; }
.ct-modal-box button.ct-wide { width: 100%; }
.ct-modal-box .ct-later { margin-top: 10px; }
.ct-sv-b { display: flex; gap: 10px; flex-wrap: wrap; }

/* the progress */
.ct-progress { text-align: center; padding: 36px 24px; }
.ct-pt { font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 20px; min-height: 28px; }
.ct-bar { position: relative; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .09); overflow: hidden; max-width: 520px; margin: 0 auto; }
.ct-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: #f2f2f4; transition: width .25s linear; overflow: hidden; }
.ct-bar i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(10, 10, 12, .28), transparent); transform: translateX(-100%); animation: ct-sweep 1.6s ease-in-out infinite; }
@keyframes ct-sweep { to { transform: translateX(100%); } }
.ct-pn { margin: 18px auto 0; max-width: 460px; font-size: 14px; line-height: 1.55; color: var(--ink-soft, #a3a3ad); }

/* the «server is ready» dialog */
.ct-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .66); backdrop-filter: blur(6px); animation: ct-fade .2s ease; }
.ct-modal-box { position: relative; width: 100%; max-width: 420px; box-sizing: border-box; padding: 32px 28px 26px; border-radius: 22px; border: 1px solid var(--line-2, rgba(255, 255, 255, .17)); background: #111114; text-align: center; animation: ct-pop .28s cubic-bezier(.2, .9, .3, 1.2); }
.ct-modal-ic { width: 88px; height: 88px; margin: 0 auto 18px; border-radius: 24px; display: grid; place-items: center; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2, rgba(255, 255, 255, .17)); }
.ct-modal-box h3 { margin: 0 0 10px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.ct-modal-box p { margin: 0 0 22px; color: var(--ink-soft, #a3a3ad); line-height: 1.55; font-size: 15px; }
.ct-wide { display: block; text-align: center; }
.ct-linkrow { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 6px 6px 6px 14px; border: 1px solid var(--line, rgba(255, 255, 255, .1)); border-radius: 999px; }
.ct-linkrow code { background: none; padding: 0; border: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font-size: 14px; color: #f2f2f4; }
.ct-linkrow .btn { padding: 7px 14px; font-size: 13px; }
.ct-x { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft, #a3a3ad); font-size: 24px; line-height: 1; cursor: pointer; }
.ct-x:hover { color: #f2f2f4; background: rgba(255, 255, 255, .07); }
@keyframes ct-fade { from { opacity: 0; } }
@keyframes ct-pop { from { opacity: 0; transform: translateY(10px) scale(.97); } }

/* the explanation */
.ct-sec { padding: 34px 0 0 !important; margin: 0 0 34px; border-top: 1px solid var(--line, rgba(255, 255, 255, .1)); }
.ct-sec h2 { margin: 0 0 20px; font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.ct-steps { list-style: none; margin: 0; padding: 0; }
.ct-steps li { display: flex; gap: 22px; padding: 18px 0; border-top: 1px solid var(--line, rgba(255, 255, 255, .1)); }
.ct-steps li:first-child { border-top: 0; padding-top: 0; }
.ct-num { flex: none; width: 44px; font-size: 22px; font-weight: 300; color: var(--ink-soft, #a3a3ad); letter-spacing: -.02em; }
.ct-steps b { display: block; font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.ct-steps p, .ct-text { margin: 0; color: var(--ink-soft, #a3a3ad); line-height: 1.6; font-size: 15.5px; max-width: 640px; }

/* the header's extras */
.ct-user { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--line-2, rgba(255, 255, 255, .17)); color: #f2f2f4; text-decoration: none; font-weight: 600; flex: none; }
.ct-user[hidden] { display: none; }
.ct-user img { width: 100%; height: 100%; object-fit: cover; }
.ct-mode-slot { display: flex; }
.ct-mode-slot:empty { display: none; }
.ct-mode { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 1px solid rgba(255, 255, 255, .17); background: transparent; color: #a3a3ad; }
.ct-mode:hover { color: #f2f2f4; border-color: #f2f2f4; }
.ct-mode.on { background: #f4f4f6; border-color: #f4f4f6; color: #0a0a0c; }
/* the tickets button carries its words: a pill «Не работает? Откройте тикет» (just «Тикет» on phones) */
.ct-mode.ct-tix { width: auto; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px 0 13px; border-radius: 999px; font-size: 14px; white-space: nowrap; text-decoration: none; }
.ct-tix-short { display: none; }
/* a line break typed by an admin (a 
 in the text) shows as a break */
.ct-main [data-i18n] { white-space: pre-line; }
.ct-edit { outline: 1px dashed rgba(255, 255, 255, .28); outline-offset: 4px; border-radius: 4px; cursor: text; }
.ct-edit:focus { outline: 1px solid #f2f2f4; }
.ct-savebar { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 18px; border-radius: 999px; border: 1px solid var(--line-2, rgba(255, 255, 255, .17)); background: #16161a; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .8); max-width: calc(100vw - 32px); font-size: 14px; }
.ct-savebar[hidden] { display: none; }
.ct-savebar .btn { padding: 8px 16px; font-size: 13px; }
.ct-page-footer { margin-top: 24px; }

@media (max-width: 640px) {
  .ct-main { padding: 8px 18px 32px; }
  .prl .nav.ct-nav .nav-inner { padding: 14px 18px; gap: 8px; min-height: 70px; }
  .prl .nav.ct-nav .brand-name { font-size: 20px; }
  .ct-nav .ct-logo { width: 26px; height: 26px; }
  .ct-page-footer .ct-logo { width: 22px; height: 22px; }
  .ct-hero-tags { margin-bottom: 18px; }
  .ct-hero-tags img { width: 105px; height: 64px; }
  .ct-card { padding: 18px; border-radius: 16px; }
  .ct-go, .ct-row .btn-ghost { flex: 1 1 100%; }
  /* the popout as a sheet at the bottom of the screen — wherever the tile ended up in the row */
  .ct-pick { position: fixed; left: 12px; right: 12px; bottom: 12px; width: auto; }
  .ct-tagbox { flex-basis: 100%; }
  .ct-sv-b { flex: 1 1 100%; }
  .ct-sv-b .btn { flex: 1; text-align: center; }
  .ct-steps li { gap: 14px; }
  .ct-num { width: 34px; font-size: 19px; }
  .ct-savebar { bottom: 14px; width: calc(100vw - 24px); box-sizing: border-box; justify-content: flex-end; }
  .ct-savebar span { margin-right: auto; }
  .ct-mode.ct-tix { padding: 0 12px 0 10px; gap: 6px; font-size: 13px; }
  .ct-tix-long { display: none; }
  .ct-tix-short { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .ct-bar i::after, .ct-loading { animation: none; } }

/* the load (GET /customtag/load): a pill over the dashboard, and an orange banner when few or no servers are free */
.ct-loadwrap { display: grid; justify-items: center; gap: 12px; }
.ct-loadwrap:not(:empty) { margin: 0 0 16px; }
.ct-load { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border: 1px solid var(--line-2, rgba(255, 255, 255, .17)); border-radius: 999px; background: rgba(10, 10, 12, .72); font-size: 13.5px; color: var(--ink-soft, #a3a3ad); }
.ct-load b { color: #f2f2f4; font-variant-numeric: tabular-nums; font-weight: 600; }
.ct-load-bar { position: relative; width: 72px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.ct-load-bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: #f2f2f4; transition: width .6s ease; }
.ct-load.low .ct-load-bar i, .ct-load.full .ct-load-bar i { background: #f59e0b; }
.ct-load.low b, .ct-load.full b { color: #fbbf24; }
.ct-banner { justify-self: stretch; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid #f59e0b; border-radius: 14px; background: rgba(245, 158, 11, .08); color: #f2f2f4; text-align: left; }
.ct-banner-ic { flex: none; color: #f59e0b; margin-top: 1px; }
.ct-banner b { display: block; font-weight: 600; margin: 0 0 3px; }
.ct-banner span { display: block; font-size: 14px; line-height: 1.5; color: var(--ink-soft, #a3a3ad); }
.ct-go:disabled { opacity: .45; cursor: not-allowed; }

/* «Все теги»: hairline rows, the tag as a chip, «Присоединиться» as a light ghost pill; rows off screen are not
   laid out (content-visibility), so even a long scrolled list stays light */
.ct-tags-search { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; margin: 22px 0 10px; border: 1px solid var(--line-2, rgba(255, 255, 255, .17)); border-radius: 999px; background: rgba(0, 0, 0, .35); color: var(--ink-soft, #a3a3ad); cursor: text; }
.ct-tags-search:focus-within { border-color: #f2f2f4; color: #f2f2f4; }
.ct-tags-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #f2f2f4; font: inherit; font-size: 15px; }
.ct-tags-search input::placeholder { color: rgba(255, 255, 255, .35); }
.ct-tags-search input::-webkit-search-cancel-button { filter: invert(1); opacity: .5; }
/* the filters at the right end of the search box: the badge, the colour, «Сбросить» (customtag.js → filtHtml);
   the panel opens under the box, at its right edge (popHtml) */
.ct-tags-bar { position: relative; margin: 22px 0 10px; }
.ct-tags-bar .ct-tags-search { margin: 0; padding-right: 6px; }
.ct-tf { display: flex; align-items: center; gap: 4px; flex: none; }
.ct-tfb { position: relative; width: 36px; height: 36px; flex: none; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 50%; background: none; color: var(--ink-soft, #a3a3ad); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.ct-tfb:hover, .ct-tfb[aria-expanded="true"] { background: rgba(255, 255, 255, .07); color: #f2f2f4; }
.ct-tfb.on { border-color: rgba(255, 255, 255, .55); }
.ct-tfb-ic { display: grid; place-items: center; line-height: 0; transition: opacity .22s, transform .22s; }
.ct-tfb-ic.out { opacity: 0; transform: scale(.7); }
.ct-tfb-sw { display: block; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
/* no colour chosen: a gradient flowing through the hues */
.ct-tfb-sw.flow { background: conic-gradient(#ff4d6d, #ffb020, #f5e663, #3ddc84, #22c3d6, #5865f2, #a259ff, #ff4dc4, #ff4d6d); animation: ct-flow 6s linear infinite; }
@keyframes ct-flow { to { filter: hue-rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ct-tfb-sw.flow { animation: none; } .ct-tfb-ic { transition: none; } }
.ct-tfb-x:hover { color: #f2f2f4; }
.ct-tf-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: min(400px, 100%); box-sizing: border-box; padding: 14px; border: 1px solid var(--line-2, rgba(255, 255, 255, .17)); border-radius: 16px; background: #0e0e11; box-shadow: 0 18px 48px rgba(0, 0, 0, .6); }
.ct-tf-pop.pal { width: 260px; display: grid; gap: 12px; }
.ct-tf-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; max-height: 290px; overflow-y: auto; }
.ct-tf-b { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 58px; padding: 0; border: 1px solid var(--line, rgba(255, 255, 255, .1)); border-radius: 10px; background: rgba(0, 0, 0, .3); color: #f2f2f4; font: inherit; font-size: 13px; cursor: pointer; transition: border-color .15s, background .15s; }
.ct-tf-b small { font-size: 10.5px; line-height: 1; color: var(--ink-soft, #a3a3ad); font-variant-numeric: tabular-nums; }
.ct-tf-b:hover { border-color: rgba(255, 255, 255, .45); }
.ct-tf-b.on { border-color: #f2f2f4; background: rgba(255, 255, 255, .08); }
.ct-tf-b:disabled { opacity: .3; cursor: default; }
.ct-tf-b:disabled:hover { border-color: var(--line, rgba(255, 255, 255, .1)); }
@media (max-width: 640px) { .ct-tf-pop { width: 100%; } .ct-tf-pop.pal { width: min(260px, 100%); } .ct-tfb { width: 34px; height: 34px; } .ct-tags-bar .ct-tags-search { gap: 8px; padding-left: 14px; } }
.ct-tags-meta { font-size: 13px; color: var(--ink-soft, #a3a3ad); margin: 0 0 6px; min-height: 18px; }
.ct-tags-list { list-style: none; margin: 0; padding: 0; }
.ct-tagrow { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line, rgba(255, 255, 255, .1)); content-visibility: auto; contain-intrinsic-size: auto 61px; }
.ct-tagrow:first-child { border-top: 0; }
.ct-tagchip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 9px; border: 1px solid var(--line-2, rgba(255, 255, 255, .17)); border-radius: 8px; background: rgba(255, 255, 255, .04); flex: none; }
.ct-tagchip b { font-size: 15px; font-weight: 700; letter-spacing: .03em; color: #f2f2f4; }
.ct-tagmem { flex: 1; min-width: 0; font-size: 14px; color: var(--ink-soft, #a3a3ad); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-join { flex: none; padding: 8px 16px !important; font-size: 13.5px !important; }
.ct-tags-more { height: 1px; }
.ct-tags-more.on { height: auto; padding: 14px 0; text-align: center; }
.ct-tags-more.on::after { content: ''; display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .2); border-top-color: #f2f2f4; animation: ct-spin .8s linear infinite; }
@keyframes ct-spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) { .ct-tagrow { gap: 10px; } .ct-tagmem { font-size: 13px; } .ct-join { padding: 7px 12px !important; } }
.ct-tagmem { display: grid; gap: 1px; white-space: normal; }
.ct-tagmem > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-tagmem small { font-size: 12.5px; color: rgba(255, 255, 255, .42); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-tagrow { contain-intrinsic-size: auto 63px; }
@media (max-width: 640px) {
  .ct-tagrow { flex-wrap: wrap; row-gap: 6px; contain-intrinsic-size: auto 84px; }
  .ct-tagrow .ct-join { margin-left: auto; }
  .ct-tagmem { order: 3; flex: 1 1 100%; display: flex; gap: 10px; align-items: baseline; }
}
/* after «Все теги», on the title's line (to its right — `order: 2`; drop it to put the plate back on the left): the animated badge-pack plate (364×240 drawn at 120×79 — its letters as tall as the title's). Its transparent
   margins (room for the flying badges) are taken back with negative margins, so the plate sits in line with the
   text and the row is only as tall as the plate; the badges fly out over the free space around */
.ct-tags-head { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; }
.ct-tags-head h2 { margin: 0 !important; }
.ct-tags-art { display: block; line-height: 0; flex: none; order: 2; margin: -25px 0 -25px -20px; pointer-events: none; }      /* the plate's own transparent left 20px taken back — the 12px gap is the space */
.ct-tags-art img { display: block; width: 120px; height: 79px; }
@media (max-width: 640px) { .ct-tags-art { margin: -25px 0 -25px -20px; } .ct-tags-art img { width: 120px; height: 79px; } .ct-tags-head { gap: 12px; } }
.ct-block { margin: 0 0 18px; }
.ct-block a { color: #fbbf24; }

/* «Реклама на сайте»: the last step before the link — join the sponsor, press «I joined» (S.server.gate) */
.ct-gate { text-align: left; }
.ct-gate-k { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--ink-soft, #a3a3ad); }
.ct-gate h3 { margin: 16px 0 8px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.ct-gate p { margin: 0 0 20px; max-width: 600px; font-size: 15px; line-height: 1.55; color: var(--ink-soft, #a3a3ad); }
.ct-sponsor { padding: 20px 0; border-top: 1px solid var(--line, rgba(255, 255, 255, .1)); border-bottom: 1px solid var(--line, rgba(255, 255, 255, .1)); }
.ct-gate-t { margin: 16px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft, #a3a3ad); }
.ct-gate-t b { color: #f2f2f4; font-weight: 600; font-variant-numeric: tabular-nums; }
.ct-gate-x { margin: 14px 0 0; padding: 0; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--ink-soft, #a3a3ad); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ct-gate-x:hover { color: #f2f2f4; }
.ct-gate-x:disabled { opacity: .5; cursor: default; }

/* the trash button on the server card and its confirm dialog */
.ct-trash { width: 42px; height: 42px; flex: none; display: grid; place-items: center; padding: 0; border: 1px solid var(--line-2, rgba(255, 255, 255, .17)); border-radius: 50%; background: transparent; color: var(--ink-soft, #a3a3ad); cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.ct-trash:hover, .ct-trash:focus-visible { color: #f87171; border-color: #f87171; background: rgba(248, 113, 113, .08); }
.prl .ct-danger { background: #f87171; color: #0a0a0c; border-color: transparent; }
.prl .ct-danger:hover { background: #fca5a5; }
.ct-danger[disabled] { opacity: .6; cursor: default; }
@media (max-width: 640px) {
  .ct-gate h3 { font-size: 21px; }
  /* the trash goes to the card's top-right corner, so the two buttons keep one line */
  .ct-server:has(.ct-trash) { position: relative; }
  .ct-server:has(.ct-trash) .ct-sv-n { padding-right: 50px; }
  .ct-sv-b .ct-trash { position: absolute; top: 0; right: 0; }
  .ct-sv-b .btn { white-space: nowrap; }
}