/* ---------------------------------------------------------------------------
   FullCheckApp — stylesheet (no frameworks)
   --------------------------------------------------------------------------- */

:root {
    --bg:          #f4f6fa;
    --surface:     #ffffff;
    --surface-alt: #f8fafc;
    --border:      #e2e8f0;
    --text:        #1e2836;
    --text-muted:  #6b7a90;
    --primary:     #2563eb;
    --primary-dark:#1d4ed8;
    --green:       #0b9771;
    --red:         #dc2626;
    --yellow:      #eab308;
    --gray:        #cbd5e1;
    --radius:      10px;
    --shadow:      0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.05);
    --font:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* The `hidden` attribute must win over component styles such as .btn { display: … } */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0 0 .6em; font-weight: 600; line-height: 1.25; }
h1 { font-size: 24px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
p  { margin: 0 0 1em; }
small { font-size: 12.5px; }

code, .mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
}

/* ------------------------------------------------------------------ layout */

.app { display: flex; min-height: 100vh; }

.sidebar {
    width: 232px;
    flex: 0 0 232px;
    background: #101a2b;
    color: #c8d3e4;
    display: flex;
    flex-direction: column;
    padding: 18px 0;
}
.sidebar .brand {
    display: block;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    padding: 0 20px 18px;
    text-decoration: none;
    letter-spacing: .2px;
}
.sidebar .brand span { color: #4ade80; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }
.sidebar nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #c8d3e4;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14.5px;
    text-decoration: none;
}
.sidebar nav a:hover { background: #1b2942; color: #fff; text-decoration: none; }
.sidebar nav a.active { background: var(--primary); color: #fff; }
.sidebar .spacer { flex: 1; }
.sidebar .side-foot { padding: 12px 20px 0; font-size: 12px; color: #7d8ba3; }
.sidebar .side-foot a { color: #9fb0c9; }
/* Dimmer than the name above it: the version is for the one moment somebody is
   asked "which build are you on", not something to read every day. */
.sidebar .side-foot .version { color: #5d6b83; font-size: 11.5px; margin-top: 2px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 12px 26px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.topbar .title { font-size: 17px; font-weight: 600; }
.topbar .spacer { flex: 1; }
.topbar .user { font-size: 13.5px; color: var(--text-muted); }
/* The bar names the account on a wide screen and the product on a phone, where
   the sidebar that would otherwise carry the name is behind the burger. */
.topbar .user-brand { display: none; }
.topbar #sc-install { flex: 0 0 auto; }
@media (max-width: 620px) {
    .topbar { flex-wrap: wrap; gap: 8px 12px; }
    .topbar .user { font-size: 12.5px; }
    .topbar #sc-ios-hint { flex-basis: 100%; }
}

/* ------------------------------------------- burger menu (phones/tablets) */

/* The button only exists on a phone, and only when the script that opens the
   drawer is running — otherwise the menu stays a plain list of links. */
.menu-btn { display: none; }
.nav-backdrop { display: none; }
.menu-icon,
.menu-icon::before,
.menu-icon::after {
    display: block;
    width: 19px;
    height: 2px;
    border-radius: 2px;
    background: var(--text);
    transition: transform .18s ease, opacity .18s ease;
}
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; }
.menu-icon::before { transform: translateY(-6px); }
.menu-icon::after  { transform: translateY(6px); }

/* The sites table has a column per check, so on a wide monitor the useful move
   is to give it that width instead of capping the page at a laptop size. The cap
   still exists — text does not become unreadably wide — but it is set where the
   table stops needing a horizontal scrollbar. */
/* Forms and settings stay readable; pages built around a wide table opt in
   with class "wide" (see $wide in the controllers) and use the whole screen. */
.content { padding: 24px 28px 60px; max-width: 1440px; width: 100%; }
.content.wide { max-width: 1920px; }

/* Reading-width content (forms, guest pages, account) stays narrow on purpose. */
.content > .narrow { max-width: 900px; }

/* ------------------------------------------------------------------- cards */

.card a { overflow-wrap: anywhere; }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 20px;
    margin-bottom: 18px;
}
.card-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;          /* the action buttons must never widen the page */
    gap: 8px;
    min-width: 0;
}
.card-title > * { min-width: 0; }
.card-title .spacer { flex: 1; }

.grid { display: grid; gap: 16px; min-width: 0; }
.grid > * { min-width: 0; }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }

.stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px 18px;
}
.stat .value { font-size: 28px; font-weight: 650; line-height: 1.1; }
.stat .label { color: var(--text-muted); font-size: 13px; margin-top: 4px; }
.stat.red   .value { color: var(--red); }
.stat.green .value { color: var(--green); }
.stat.yellow .value { color: #b45309; }

/* ------------------------------------------------------------------ tables */

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

/* A table with many rows loses its header long before it loses its rows, and a
   column of dots without the header above it says nothing. Freezing the header
   against the viewport is not possible here: the wrap already scrolls sideways,
   and a box that scrolls in one axis scrolls in both — "position: sticky; top"
   would then stick to a box that never moves vertically. So the wrap becomes
   its own scroll pane: it only ever bites when the table is taller than the
   screen, and a short table looks exactly as it did before. */
.table-wrap.sticky-head { max-height: calc(100vh - 150px); overflow: auto; }
.table-wrap.sticky-head thead th { position: sticky; top: 0; z-index: 4; }

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
table.data th, table.data td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
table.data th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    font-weight: 600;
    background: var(--surface-alt);
}
table.data tr:last-child td { border-bottom: 0; }
table.data tr:hover td { background: #f9fbff; }
table.data td.wrap, table.data th.wrap { white-space: normal; }
table.data .domain { font-weight: 600; }
table.data .domain small { display: block; font-weight: 400; color: var(--text-muted); }

/* -------------------------------------------------------------- status dot */

.dot {
    display: inline-block;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--gray);
    vertical-align: middle;
    box-shadow: 0 0 0 2px rgba(0,0,0,.04) inset;
}
.dot.ok       { background: var(--green); }
.dot.critical { background: var(--red); }
.dot.warning  { background: var(--yellow); }
.dot.unknown  { background: var(--gray); }
.dot-lg { width: 14px; height: 14px; }

.status-cell { text-align: center; }
.status-line { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px dashed var(--border); }
.status-line:last-child { border-bottom: 0; }
.status-line .name { width: 170px; font-weight: 500; }
.status-line .val { color: var(--text-muted); font-size: 13.5px; word-break: break-word; }

/* A row that carries a control rather than a value: the control takes the rest
   of the line on a wide screen and the whole of the next one on a phone. */
.setting-line .val { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.setting-line .val select { max-width: 220px; }
/* Once the row has stacked there is nothing to align against, so the control
   takes the width it was given instead of hugging the right edge. */
@media (max-width: 760px) {
    /* ".status-line.setting-line" and not ".setting-line": the phone rules for
       an ordinary value row indent it by 20px, and they are further down the
       file — an equally specific selector here would lose to them. */
    .status-line.setting-line .val { justify-content: flex-start; padding-left: 0; }
    .status-line.setting-line .val select { max-width: none; width: 100%; }
}

/* ------------------------------------------------------------------ badges */

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: #eef2f7;
    color: #475569;
}
.badge.green  { background: #d7f2e8; color: #0b7a5c; }
.badge.red    { background: #fee2e2; color: #b91c1c; }
.badge.yellow { background: #fef3c7; color: #a16207; }
.badge.blue   { background: #dbeafe; color: #1d4ed8; }
.badge.gray   { background: #eef2f7; color: #64748b; }

/* ------------------------------------------------------------------ forms */

.form-row { margin-bottom: 14px; }
label.lbl { display: block; font-size: 13.5px; font-weight: 500; margin-bottom: 5px; }

input[type=text], input[type=email], input[type=password], input[type=url], select, textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14.5px;
    font-family: inherit;
    background: #fff;
    color: var(--text);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.hint { color: var(--text-muted); font-size: 12.5px; margin-top: 4px; }

.btn {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: var(--primary);
    color: #fff;
    font-size: 14.5px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    line-height: 1.4;
}
.btn:hover { background: var(--primary-dark); text-decoration: none; color: #fff; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn.secondary { background: #fff; border-color: var(--border); color: var(--text); }
.btn.secondary:hover { background: var(--surface-alt); color: var(--text); }
.btn.danger { background: var(--red); }
.btn.danger:hover { background: #b91c1c; }
.btn.small { padding: 5px 10px; font-size: 13px; }
/* A destructive action that should not look like the main thing to do here:
   giving an access back is a quiet decision, not a call to action. */
.btn.link-btn, .btn.link-btn:hover {
    background: none;
    border-color: transparent;
    color: var(--red);
    padding-left: 0;
    padding-right: 0;
    text-decoration: underline;
}
.btn.block { display: block; width: 100%; text-align: center; }

.checkbox { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; }
.checkbox input { margin-top: 3px; }

/* ------------------------------------------------------------------ alerts */

.alert {
    padding: 11px 14px;
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: 14px;
    border: 1px solid transparent;
}
.alert.success { background: #dcfce7; border-color: #bbf7d0; color: #14532d; }
.alert.error   { background: #fee2e2; border-color: #fecaca; color: #7f1d1d; }
.alert.warning { background: #fef3c7; border-color: #fde68a; color: #713f12; }
.alert.info    { background: #dbeafe; border-color: #bfdbfe; color: #1e3a8a; }

/* ------------------------------------------------------------- guest pages */

.guest {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 16px;
    background: linear-gradient(160deg, #0f172a 0%, #1e293b 55%, #24344d 100%);
}
.guest-box {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 20px 45px rgba(2,6,23,.35);
}
.guest-box .brand {
    font-size: 20px; font-weight: 650; margin-bottom: 4px; color: #0f172a;
    display: block; text-align: center; text-decoration: none;
}
.guest-box .brand span { color: var(--green); }
.guest-box .sub { text-align: center; color: var(--text-muted); font-size: 13.5px; margin-bottom: 20px; }
.guest-links { margin-top: 16px; text-align: center; font-size: 13.5px; color: var(--text-muted); }

/* ------------------------------------------------------------------- misc */

.muted { color: var(--text-muted); }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.mt16 { margin-top: 16px; } .mb16 { margin-bottom: 16px; }
.flex { display: flex; align-items: center; gap: 10px; }
.site-meta { gap: 22px 26px; align-items: flex-start; }
@media (max-width: 760px) { .site-meta { gap: 12px 20px; } }
.flex-wrap { flex-wrap: wrap; }
.inline-form { display: inline; }

.empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}
.empty h3 { color: var(--text); }

.progress-note { font-size: 13px; color: var(--text-muted); }

.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); }
.legend span { display: flex; align-items: center; gap: 6px; }

.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 18px; flex-wrap: wrap; }
.tabs a {
    padding: 8px 14px; font-size: 14px; color: var(--text-muted);
    border-bottom: 2px solid transparent; text-decoration: none;
}
.tabs a.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1050px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
    .app { flex-direction: column; }
    .sidebar { width: 100%; flex: none; padding: 12px 0; }
    /* Without JavaScript the menu stays what it was: a wrapped row of links. */
    .sidebar nav { flex-direction: row; flex-wrap: wrap; overflow-x: visible; gap: 4px; }
    .sidebar nav a { white-space: nowrap; padding: 7px 10px; font-size: 14px; }
    .sidebar .side-foot { display: none; }
    .content { padding: 16px 14px 50px; }
    .grid-4, .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); }

    /* status rows: label above the value, so long values never push the page */
    .status-line { flex-wrap: wrap; row-gap: 2px; }
    .status-line .name { width: auto; flex: 1 1 auto; }
    .status-line .val { flex: 1 1 100%; padding-left: 20px; }

    /* action buttons of a card: comfortable tap targets, always wrapped */
    .card-title { row-gap: 10px; }
    .card-title .spacer { flex-basis: 100%; height: 0; }
    .card-title .btn.small,
    .card-title form.inline-form { flex: 1 1 auto; }
    .card-title form.inline-form .btn { width: 100%; }
    .card-title .btn.small { padding: 8px 12px; }

    /* site meta (URL / added / last check …) */
    .flex.flex-wrap { gap: 14px 18px; }
}

/* On a phone the menu becomes a drawer behind a burger: the list of links was
   eating a third of the screen on every page. Only with JavaScript — otherwise
   the rules above keep the plain, always-visible list. */
@media (max-width: 760px) {
    .topbar .user-email { display: none; }
    .topbar .user-brand { display: inline; font-weight: 600; color: var(--text); }

    .js-nav .menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 38px;
        height: 38px;
        margin: -4px 2px -4px -6px;
        flex: 0 0 auto;
        background: none;
        border: 0;
        border-radius: 9px;
        cursor: pointer;
        color: inherit;
    }
    .js-nav .menu-btn:hover { background: var(--bg); }

    /* The bar stays above the drawer, so the burger is always reachable and
       turns into the cross that closes it. */
    .js-nav .topbar {
        position: sticky;
        top: 0;
        z-index: 90;
    }

    /* the drawer itself */
    .js-nav .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 250px;
        max-width: 82vw;
        /* starts under the bar that stays on top of it */
        padding: calc(var(--topbar-h, 56px) + 14px) 0 calc(18px + env(safe-area-inset-bottom));
        overflow-y: auto;
        z-index: 80;
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: 0 0 32px rgba(2, 6, 23, .45);
    }
    .js-nav .sidebar nav { flex-direction: column; flex-wrap: nowrap; gap: 2px; padding: 0 10px; }
    .js-nav .sidebar nav a { padding: 11px 12px; font-size: 15px; }
    .js-nav .sidebar .side-foot { display: block; }

    .js-nav.nav-open .sidebar { transform: translateX(0); }

    .js-nav .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 70;
        background: rgba(2, 6, 23, .45);
        opacity: 0;
        transition: opacity .22s ease;
    }
    .js-nav .nav-backdrop[hidden] { display: none; }
    .js-nav.nav-open .nav-backdrop { opacity: 1; }
    .js-nav.nav-open { overflow: hidden; }

    /* burger turns into a cross while the drawer is open */
    .js-nav.nav-open .menu-icon { background: transparent; }
    .js-nav.nav-open .menu-icon::before { transform: rotate(45deg); }
    .js-nav.nav-open .menu-icon::after  { transform: rotate(-45deg); }
}

/* very narrow phones */
@media (max-width: 420px) {
    .card { padding: 16px 14px; }
    .card-title { font-size: 14.5px; }
    .stat .value { font-size: 24px; }
}

/* -------------------------------------------------- groups & manual ordering */

/* The sites table carries a column per check. On a wide monitor it should use
   that width instead of scrolling, so the padding is tighter here than in the
   other tables and the status columns are only as wide as a dot needs.
   Past a certain number of columns nothing fits any more, and squeezing further
   only makes an unreadable table: from there the table scrolls sideways inside
   its own area, with the site name pinned so you keep your bearings. */
table.data.sites-table th,
table.data.sites-table td { padding: 9px 8px; }
table.data.sites-table th.status-cell,
table.data.sites-table td.status-cell { padding-left: 4px; padding-right: 4px; min-width: 42px; }
/* A header is allowed to wrap in every language and at every width. "Скорость"
   is not "Speed", and a header that refuses to wrap makes the whole table
   scroll sideways rather than take a second line for itself. */
table.data.sites-table th.status-cell { white-space: normal; word-break: break-word; }
/* "My sites" carries seventeen columns and needs every pixel, so there a header
   may be cut mid-word. The board of added pages has fewer, and can afford to
   keep "SCHEMA" whole instead of showing "SCHEM A". */
table.data.pages-table th.status-cell { word-break: normal; overflow-wrap: break-word; }
/* The mark of a product (Tag Manager, Analytics, the two pixels) replaces the
   word only where there is no room for the word — on a phone. On a desktop the
   header has the space and a name beats a picture every time, so it stays
   hidden there. It takes the colour of the header text like any other glyph. */
.check-icon { display: none; width: 15px; height: 15px; margin: 0 auto; }

/* The pinned column is the one that never scrolls away, so every pixel it takes
   is a pixel the checks never get back. 170 still holds a normal domain on one
   line. Together with the 42px status cells above it this is what keeps all
   three languages inside a 1440 screen without a horizontal scrollbar. */
table.data.sites-table td.domain { min-width: 170px; }
table.data.sites-table td.domain small { font-size: 11.5px; }

/* The first column stays put while the checks scroll past it — a row of dots
   means nothing when you cannot see whose row it is.
   border-collapse must be "separate" for that: a collapsed table has no cell
   boxes of its own to position, and the sticky cell silently scrolls away. */
table.data.sites-table { border-collapse: separate; border-spacing: 0; --drag-w: 18px; }
table.data.sites-table th.name-col,
table.data.sites-table td.name-col,
table.data.sites-table th.drag-col,
table.data.sites-table td.drag-col {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);
}
/* With the drag handle in front of it the name starts one column further in.
   The offset and the width of that column are the same number on purpose: an
   empty cell in an auto-layout table shrinks to its padding, so a hard-coded
   28px offset left a 22px gap the scrolled rows showed through — the data
   appeared to come out on the wrong side of the pinned column. One custom
   property now drives both, and the column can neither grow nor shrink away
   from it. 18px is the drag handle (11px) plus its 6px of padding. */
table.data.sites-table.reorderable th.name-col,
table.data.sites-table.reorderable td.name-col { left: var(--drag-w); }
table.data.sites-table th.drag-col,
table.data.sites-table td.drag-col {
    width: var(--drag-w);
    min-width: var(--drag-w);
    max-width: var(--drag-w);
}
table.data.sites-table th.name-col,
table.data.sites-table th.drag-col { background: var(--surface-alt); }
/* The corner of the frozen header is pinned in both directions and has to stay
   above the rows sliding under it as well as the header cells beside it. */
.table-wrap.sticky-head table.data.sites-table th.name-col,
.table-wrap.sticky-head table.data.sites-table th.drag-col { z-index: 6; }
table.data.sites-table tr:hover td.name-col,
table.data.sites-table tr:hover td.drag-col { background: #f9fbff; }
table.data.sites-table tr.group-row td { background: var(--surface-alt); }
/* The group header spans the whole table, so pinning the cell would do nothing;
   what has to stay put is the title inside it. */
table.data.sites-table tr.group-row .group-head,
table.data.sites-table tr.empty-group .group-head { position: sticky; left: 0; }
table.data.sites-table.reorderable tr.group-row .group-head,
table.data.sites-table.reorderable tr.empty-group .group-head { left: 6px; }

/* Laptops (1280–1440): squeeze the padding a little, but not the readability. */
@media (min-width: 1051px) and (max-width: 1439px) {
    table.data.sites-table th,
    table.data.sites-table td { padding: 8px 5px; }
    table.data.sites-table th { font-size: 10.5px; letter-spacing: 0; }
    table.data.sites-table th.status-cell,
    table.data.sites-table td.status-cell { padding-left: 3px; padding-right: 3px; min-width: 40px; }
    table.data.sites-table td.domain { min-width: 130px; }
}

/* Phones and small tablets. The pinned column has to earn its place: on a 390px
   screen a 170px name column eats half the width and leaves room for three
   dots. It shrinks to a third of the screen instead, the name and the URL are
   cut to one line each, and the scroll pane is measured from the shorter
   header that a phone has. */
@media (max-width: 760px) {
    table.data.sites-table th,
    table.data.sites-table td { padding: 8px 6px; }
    /* All three widths are the same number: with only a maximum the column is
       squeezed to a couple of characters by the seventeen columns behind it,
       and with only a minimum it grows back to half the screen. */
    table.data.sites-table td.domain,
    table.data.sites-table th.name-col {
        width: 34vw;
        min-width: 34vw;
        max-width: 34vw;
    }
    /* A domain has no spaces to break at, so wrapping it means cutting it in
       half mid-word — two ragged lines per site and a table twice as tall.
       One line each, cut with an ellipsis: the beginning of a domain is what
       tells sites apart, and the whole URL is a tap away. */
    table.data.sites-table td.domain > a,
    table.data.sites-table td.domain small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    table.data.sites-table td.domain small { font-size: 11px; }
    table.data.sites-table th.status-cell,
    table.data.sites-table td.status-cell { min-width: 38px; }
    /* The word gives way to the mark on the four columns that have one. It is
       not removed: a screen reader still reads "Google Analytics 4", and the
       column keeps its name for anything that is not a pair of eyes. */
    table.data.sites-table th.has-icon .th-text {
        position: absolute;
        width: 1px; height: 1px;
        margin: -1px; padding: 0; border: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    table.data.sites-table th.has-icon .check-icon { display: block; }
    table.data.sites-table th.has-icon { min-width: 30px; }
    /* On a 38px column any word longer than four letters breaks, and "PRODUCTS"
       came out as "PRO / DUCT / S" — three lines of header, unreadable, and the
       tallest column sets the height for all of them. Here the header keeps its
       word whole and the column grows to fit it instead. The table gets ~90px
       wider, which on a screen that scrolls sideways anyway costs nothing, and
       the header drops from three lines to one. */
    table.data.sites-table th { font-size: 10.5px; letter-spacing: 0; }
    table.data.sites-table th.status-cell { white-space: nowrap; word-break: normal; }
    .table-wrap.sticky-head { max-height: calc(100vh - 120px); }
}

/* The history table's two value columns can hold a comma-separated list of
   every schema type found on a page — a single unbreakable line that pushes
   the whole table sideways on a laptop. The result column beside them is the
   one worth reading whole, so it is the values that give way. */
table.data.history-table td.mono {
    overflow-wrap: anywhere;
    word-break: break-word;
}
@media (max-width: 1439px) {
    table.data.history-table td.mono { max-width: 170px; }
    /* "Структурированные данные" is one word too many for a laptop column. */
    table.data.history-table td:nth-child(2) { max-width: 150px; overflow-wrap: anywhere; }
    table.data.history-table th,
    table.data.history-table td { padding-left: 8px; padding-right: 8px; }
}

/* clicking the Domain header sorts by name, clicking again returns */
.sort-link { color: inherit; display: inline-flex; align-items: center; gap: 5px; }
.sort-link:hover { color: var(--primary); text-decoration: none; }
.sort-link.active { color: var(--primary); }
.sort-mark { font-size: 10px; opacity: .7; }

/* a group header inside the table */
tr.group-row td {
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
    padding: 7px 10px;
}
.group-head { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }
.group-head .muted { font-weight: 400; font-size: 12.5px; }
tr.empty-group td { font-size: 13px; font-style: italic; padding: 10px; }

/* the drag handle column exists only while reordering */
/* The width lives on the table as --drag-w, because the offset that pins the
   name column beside it has to be the very same number. */
.drag-col { width: var(--drag-w, 18px); padding-left: 6px !important; padding-right: 0 !important; }
.drag-handle {
    display: none;
    cursor: grab;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1;
    user-select: none;
}
.is-reordering .drag-handle { display: inline-block; }
.is-reordering .drag-handle:active { cursor: grabbing; }
.is-reordering tr.site-row,
.is-reordering tr.group-row { background: #fdfdff; }
.is-reordering tr.site-row td { border-bottom-style: dashed; }
tr.dragging { opacity: .45; }

.reorder-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: #eff6ff; border: 1px solid #dbeafe; color: #1e40af;
    border-radius: 8px; padding: 9px 12px; margin-bottom: 12px; font-size: 13.5px;
}
.reorder-bar .spacer { flex: 1; }
.reorder-state { font-weight: 600; }
.reorder-state.ok    { color: var(--green); }
.reorder-state.error { color: var(--red); }

/* the groups page */
.group-card {
    border: 1px solid var(--border); border-radius: 10px;
    padding: 12px 14px; margin-bottom: 10px;
}
.group-edit { display: flex; gap: 8px; align-items: center; }
.group-edit input[type=text] { flex: 1 1 auto; }
.group-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.group-meta .spacer { flex: 1; }

@media (max-width: 620px) {
    .group-edit { flex-wrap: wrap; }
    .group-edit input[type=text] { flex: 1 1 100%; }
    .reorder-bar { font-size: 13px; }
}

/* ------------------------------------------------------------ Google sign-in */

/* "or" between the form and the provider button */
.or-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 18px 0 14px; color: var(--text-muted); font-size: 12.5px;
}
.or-divider::before, .or-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--border);
}

/* Google asks for a white button with their mark and a visible border */
.btn-google {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 10px 16px;
    background: #fff; color: #1f1f1f;
    border: 1px solid #dadce0; border-radius: 8px;
    font-size: 14.5px; font-weight: 500; font-family: inherit;
    text-decoration: none; cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease;
}
.btn-google:hover {
    background: #f8faff; border-color: #d2e3fc; text-decoration: none;
    box-shadow: 0 1px 2px rgba(60,64,67,.3);
}
.btn-google:active { background: #f1f3f4; }
.btn-google svg { flex: 0 0 auto; }

/* the "Sign-in methods" list on the account page */
.signin-method {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 0; border-bottom: 1px dashed var(--border);
    font-size: 14px; min-width: 0;
}
.signin-method:last-of-type { border-bottom: 0; }
.signin-method .name { flex: 0 0 160px; font-weight: 500; }
.signin-method .val  { flex: 1 1 auto; min-width: 0; font-size: 13.5px; overflow-wrap: anywhere; }

@media (max-width: 620px) {
    .signin-method { flex-wrap: wrap; row-gap: 2px; }
    .signin-method .name { flex: 1 1 auto; }
    .signin-method .val  { flex: 1 1 100%; padding-left: 20px; }
}

/* ----------------------------------------------------------- Telegram keys */

.key-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
}
/* label, masked hint, status and the buttons — must wrap on a phone */
.key-head {
    display: flex; align-items: center;
    gap: 8px 10px; flex-wrap: wrap;
    margin-bottom: 8px; min-width: 0;
}
.key-head > b { overflow-wrap: anywhere; }
.key-head .spacer { flex: 1 1 auto; }
/* the buttons move to the next line together, never one without the other */
.key-actions { display: flex; gap: 8px; flex: 0 0 auto; }

@media (max-width: 620px) {
    .key-head .spacer { flex-basis: 100%; height: 0; }
    .key-actions { flex: 1 1 100%; }
    .key-actions form.inline-form { flex: 1 1 auto; }
    .key-actions .btn { width: 100%; }
}

/* ------------------------------------------------------ collapsible cards */

details.collapsible > summary,
details.problem-group > summary {
    cursor: pointer;
    list-style: none;              /* hide the native triangle */
    user-select: none;
}
details.collapsible > summary::-webkit-details-marker,
details.problem-group > summary::-webkit-details-marker { display: none; }

details.collapsible > summary { margin-bottom: 0; }
details.collapsible[open] > summary { margin-bottom: 14px; }

/* our own chevron, rotated when the block is open */
.chevron {
    flex: 0 0 auto;
    width: 8px; height: 8px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(-45deg);
    transition: transform .15s ease;
    margin-right: 2px;
}
details[open] > summary .chevron { transform: rotate(45deg); margin-top: -3px; }
details > summary:hover .chevron { border-color: var(--primary); }

.problem-summary { font-size: 13px; font-weight: 400; }

/* one site inside the "Problems found" card */
.problem-group { border-top: 1px solid var(--border); }
.problem-group:first-of-type { border-top: 0; }
.problem-group > summary {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 0; font-size: 14.5px;
}
.problem-group[open] > summary { padding-bottom: 4px; }
.problem-group .site-name { font-weight: 600; overflow-wrap: anywhere; }

.problem-row {
    display: flex; align-items: baseline; gap: 8px;
    padding: 5px 0 5px 20px; font-size: 13.5px; min-width: 0;
}
.problem-row .name { flex: 0 0 170px; color: var(--text-muted); }
.problem-row .val  { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.problem-group > .problem-row:last-child { padding-bottom: 12px; }

@media (max-width: 620px) {
    .problem-summary { flex-basis: 100%; }
    .problem-row { flex-wrap: wrap; row-gap: 2px; }
    .problem-row .name { flex: 1 1 auto; }
    .problem-row .val  { flex: 1 1 100%; padding-left: 20px; }
}

/* ------------------------------------------------- PageSpeed / SEO blocks */

/* score chip in the sites table (mobile / desktop) */
.score {
    display: inline-block;
    min-width: 30px;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.score.green  { background: #d7f2e8; color: #0b7a5c; }
.score.yellow { background: #fef3c7; color: #a16207; }
.score.red    { background: #fee2e2; color: #b91c1c; }
.score.gray   { background: #eef2f7; color: #64748b; }
.speed-cell { display: table-cell; }
.speed-cell .score + .score { margin-left: 4px; }
.speed-cell .score::before { content: attr(data-s) " "; font-weight: 500; opacity: .65; }

/* the two gauges of the PageSpeed card */
.gauges { display: flex; gap: 26px; flex-wrap: wrap; margin: 4px 0 14px; }
.gauge { position: relative; width: 64px; text-align: center; }
.gauge svg { display: block; }
.gauge-score {
    position: absolute; left: 0; top: 18px; width: 100%;
    font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.gauge-label { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

table.data td .metric, .metric { font-variant-numeric: tabular-nums; font-weight: 600; }
.metric.ok       { color: var(--green); }
.metric.warning  { color: #a16207; }
.metric.critical { color: var(--red); }
table.data.metrics td.section {
    background: var(--surface-alt); color: var(--text-muted);
    font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em;
}

/* 30-day score trend */
.trend { margin-top: 14px; }
.trend-head { display: flex; align-items: center; gap: 10px; font-size: 12.5px; flex-wrap: wrap; }
.trend-key { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); }
.trend-key i { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }
.trend-svg { width: 100%; height: 60px; margin-top: 4px; }

/* SEO tags: Title / Description / H1 */
.seo-tag { padding: 10px 0; border-bottom: 1px dashed var(--border); }
.seo-tag:last-of-type { border-bottom: 0; }
.seo-tag-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.seo-tag-text {
    margin-top: 4px; padding-left: 20px;
    color: var(--text); font-size: 13.5px;
    overflow-wrap: anywhere;
}

.seo-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px; margin: 12px 0; font-size: 13.5px;
}
.seo-grid > div { min-width: 0; }
.seo-grid > div.wide { grid-column: 1 / -1; }
.seo-grid span.muted { display: block; font-size: 12.5px; }
.break { overflow-wrap: anywhere; }

.og-block { margin-top: 6px; border-top: 1px solid var(--border); padding-top: 12px; }
.og-list { display: flex; flex-direction: column; gap: 5px; }
.og-row { display: flex; align-items: baseline; gap: 8px; font-size: 13px; min-width: 0; }
.og-row .mono { flex: 0 0 128px; color: var(--text-muted); }
.og-val { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* Schema.org */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px;
    background: #dbeafe; color: #1d4ed8;
    font-size: 12.5px; font-weight: 600;
}
.chip.gray { background: #eef2f7; color: #64748b; }
.chip small { font-weight: 400; opacity: .75; }

.issue-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.issue-list li { display: flex; align-items: baseline; gap: 8px; font-size: 13px; overflow-wrap: anywhere; }

.page-schema { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.page-schema-item { padding: 8px 0; border-bottom: 1px dashed var(--border); }
.page-schema-item:last-child { border-bottom: 0; }
.page-schema-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.page-schema-item .issue-list { padding-left: 20px; }

/* the page column of the SEO / speed tables must not collapse to one letter */
table.data th.page-col, table.data td.page-col { min-width: 150px; }

@media (max-width: 620px) {
    .seo-grid { grid-template-columns: minmax(0, 1fr); }
    .og-row { flex-wrap: wrap; }
    .og-row .mono { flex: 0 0 auto; }
    .og-val { flex: 1 1 100%; padding-left: 20px; }
    .gauges { gap: 18px; }
}

/* --------------------------------------------------- impersonation banner */

.impersonation-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: #fef3c7;
    border-bottom: 1px solid #fde68a;
    color: #713f12;
    padding: 10px 26px;
    font-size: 13.5px;
}
.impersonation-bar .btn { background: #b45309; }
.impersonation-bar .btn:hover { background: #92400e; }

/* --------------------------------------------------- PWA install (mobile) */

/* The install card only makes sense on a phone or tablet… */
.install-card { display: none; }
@media (max-width: 760px) {
    .install-card:not([hidden]) { display: block; }
}
/* …and never when the app is already running from the home screen. */
@media all and (display-mode: standalone), all and (display-mode: fullscreen), all and (display-mode: minimal-ui) {
    .install-card { display: none !important; }
}

/* ------------------------------------------------------- PWA offline bar */

.offline-bar {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    background: #101a2b;
    color: #fff;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 13.5px;
    box-shadow: 0 6px 20px rgba(2, 6, 23, .35);
    z-index: 900;
}
.offline-bar[hidden] { display: none; }

/* extra bottom padding when the app runs full screen on a phone */
@media (display-mode: standalone) {
    .content { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
    .sidebar { padding-top: calc(18px + env(safe-area-inset-top)); }
}

/* ------------------------------------------------- payment result page */

/* Why the payment failed, under the red line — the reason comes from the bank. */
.pay-reason { margin-top: 6px; font-size: 13px; opacity: .85; }

/* A quiet spinner while we wait for the payment service to answer. */
.spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    vertical-align: -1px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    opacity: .6;
    animation: sc-spin .7s linear infinite;
}
@keyframes sc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* ------------------------------------------------------- shared access */

.share-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; }
.share-card:last-of-type { margin-bottom: 0; }
.share-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.share-head .spacer { flex: 1; }
.share-card .muted { font-size: 12.5px; }

/* Sites another account shared with us: visibly not ours, and not draggable. */
tbody.shared-group tr.group-row td { background: #f2f6ff; }
tr.shared-row td.domain a { font-weight: 600; }
.drag-handle-off { opacity: .25; cursor: default; }
.share-notify { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin-top: 8px; }
.share-role { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.share-role select { max-width: 200px; }

/* ------------------------------------------------ SEO: one page at a time */


/* The arrow that opens the real page, next to the one that opens our card. */
.seo-open {
    display: inline-block;
    padding: 0 4px;
    font-size: 15px;
    line-height: 1;
    color: var(--text-muted);
    text-decoration: none;
}
.seo-open:hover { color: var(--primary); text-decoration: none; }


/* "was: <the previous text>" under a tag that changed */
.seo-tag-was {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

/* ------------------------------------------- Schema.org: the data itself */

.schema-data { margin-top: 10px; }
.schema-data > summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--text-muted);
    list-style: none;
}
.schema-data > summary::-webkit-details-marker { display: none; }
.schema-data > summary::before { content: "▸ "; }
.schema-data[open] > summary::before { content: "▾ "; }
.schema-data > summary:hover { color: var(--primary); }

.schema-block { border-left: 2px solid var(--border); padding-left: 10px; margin: 10px 0 0; }
.schema-block-type { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.schema-props { display: grid; grid-template-columns: minmax(90px, auto) 1fr; gap: 2px 12px; margin: 0; font-size: 13px; }
.schema-props dt { color: var(--text-muted); }
.schema-props dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 620px) { .schema-props { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
    .schema-props dd { margin-bottom: 6px; } }

/* --------------------------------------------- which columns to show */

.column-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 4px 16px;
}
.column-picker .checkbox { margin: 0; }

/* ---------------------------------------------------------- searchable select
   The visible half of the "picker" in app.js. The original <select> stays in
   the DOM and keeps the value — it is only hidden once the script has built
   the replacement, so with JS off the page shows a plain multi-select. */

select.picker-source { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }

.picker { position: relative; }

.picker-field {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 6px 32px 6px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    font-size: 14.5px;
    cursor: pointer;
}
.picker-field:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.picker.is-open .picker-field { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.picker.is-disabled .picker-field { background: var(--surface-alt); color: var(--text-muted); cursor: default; }

.picker-values { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.picker-placeholder { color: var(--text-muted); }

.picker-caret {
    position: absolute;
    right: 12px;
    top: 50%;
    width: 0; height: 0;
    margin-top: -2px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--text-muted);
}

.picker-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 2px 4px 2px 9px;
    border-radius: 999px;
    background: rgba(37,99,235,.10);
    color: var(--primary-dark);
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.picker-x {
    border: 0;
    background: none;
    color: inherit;
    font-size: 15px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
    opacity: .65;
}
.picker-x:hover { opacity: 1; }

.picker-drop {
    position: absolute;
    z-index: 40;
    left: 0; right: 0;
    top: calc(100% + 4px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
    padding: 8px;
}
.picker-search { width: 100%; margin-bottom: 6px; }
.picker-list { max-height: 240px; overflow-y: auto; }
.picker-option { padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 14px; }
.picker-option.is-active { background: var(--surface-alt); }
.picker-option.is-selected { color: var(--primary-dark); font-weight: 500; }
.picker-option.is-selected::after { content: '✓'; float: right; opacity: .8; }
.picker-empty { padding: 8px 10px; color: var(--text-muted); font-size: 13px; }

/* ------------------------------------------------- balanced card columns ---
   The site page used to be two hand-written columns, and which of them ended
   up a screen and a half longer depended on the site: how many pages it has,
   how much markup, how many problems. Nobody can guess that when writing the
   template, so the cards are handed to the browser as one flow and it balances
   them by height. break-inside keeps a card whole. */
.card-columns { column-count: 2; column-gap: 16px; }
.card-columns > .card { break-inside: avoid; display: inline-block; width: 100%; }
@media (max-width: 1050px) { .card-columns { column-count: 1; } }

/* ---------------------------------------------------------- page texts ----- */
.text-line { padding: 10px 0; border-bottom: 1px dashed var(--border); }
.text-line:last-of-type { border-bottom: 0; }
.text-head { display: flex; align-items: center; gap: 8px; }
.text-head .spacer { flex: 1; }
.text-value {
    margin-top: 4px;
    font-size: 13.5px;
    background: var(--surface-alt);
    border-radius: 6px;
    padding: 6px 9px;
    overflow-wrap: anywhere;
}
.text-change { padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; }
.text-change:last-child { border-bottom: 0; }
.text-was, .text-now { overflow-wrap: anywhere; padding-left: 16px; position: relative; }
.text-was { color: var(--text-muted); text-decoration: line-through; text-decoration-color: rgba(107,122,144,.5); }
.text-was::before { content: '−'; position: absolute; left: 0; text-decoration: none; }
.text-now::before { content: '+'; position: absolute; left: 0; color: var(--green); }

/* ------------------------------------------------- added pages on the card --
   The pages of a site belong next to the address they extend, with the same
   four facts about each of them as about the site itself. */
.page-list { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 12px; }
.page-list-title { font-size: 12.5px; margin-bottom: 8px; }
.page-list-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 13.5px;
}
.page-list-row:last-child { border-bottom: 0; }
.page-list-url { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }

/* A badge that is also the switch that changes it. */
.badge-btn { border: 0; cursor: pointer; font: inherit; font-size: 12px; }
.badge-btn:hover { filter: brightness(.95); }

/* The board of the added pages: the same table as "My sites", so it inherits
   the sticky first column and the horizontal scroll from .sites-table. */
table.data.pages-table td.domain a { font-weight: 600; }