/* Horizontal page gutter shared by the fixed top nav and the content
   container so their left/right edges always line up. */
:root {
    --page-gutter: 16px;          /* desktop */
    --page-gutter-mobile: 8px;    /* phones and tablets, both sides of the content */

    /* Layout sizes to tune. */
    /* Fixed top bar height. */
    --nav-height: 42px;          /* desktop menu */
    --nav-height-mobile: 52px;   /* bar on phones and tablets */
    /* The six summary cards under the top bar (home, Blocks, Payments, Your
       Stats). The scale sizes their text and icon (1 = default, 0.8 = 20%
       smaller, 1.2 = 20% bigger); the card keeps its width, and its padding
       is set separately. Phones show the same cards, two per row. */
    --summary-card-scale: 1;
    --summary-card-padding: 6px;
    --summary-card-icon-size: 20px;  /* before the scale */
    --summary-card-radius: 6px;      /* corner rounding */
    /* Space above the card row (the gap under the top bar, on every page)
       and between the row and whatever follows it. */
    --summary-card-spacing: 6px;

    /* Derived from the sizes above. */
    --nav-offset: calc(var(--nav-height) + var(--summary-card-spacing));
    --nav-offset-mobile: calc(var(--nav-height-mobile) + var(--summary-card-spacing));

    /* Colors the same in both themes (dark.css / light.css hold the rest). */
    --on-accent: #fff;  /* text and icons on an accent fill */
    --discord: #5865f2;
    --code-block-background: #20232a;  /* How to Mine's commands, dark in both themes */
    --code-block-text: #fff;
    --chart-blocks-color: #3498db;  /* the Blocks chart's columns */
    --chart-solo-color: #2ecc71;
    --chart-orphans-color: #e67e22;
    --font-mono: Consolas, Monaco, 'Lucida Console', monospace;
}

/* Once a grid stacks on mobile there is no neighbouring column to gutter
   against, so semantic.css drops the columns' side padding. Basic segments are
   panels too (.ui.segment gives every segment the panel background), so they
   keep a slim side padding: text must not touch the panel edge. */
@media only screen and (max-width: 767px) {
    .ui.basic.segment {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* The theme switch fades; the page scrolls inside #root, not the body. */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow: hidden;
}

/* The top bar's dropdowns sit on the bar unboxed. */
.ui.dropdown.no-border {
    border: none;
}

#root {
    overflow-y: scroll;
    padding-bottom: 38px;
}

.desktop {
    width: 100%;
    max-width: 1268px;
    /* Maximum width for large screens */
    margin: 0 auto;
    /* Center the container */
    padding: var(--nav-offset) var(--page-gutter) 0 var(--page-gutter);
    /* Top offset clears the fixed menu; sides keep content off the viewport edges */
}

.primary-text {
    color: var(--primary-text-color);
}

.blue-text {
    color: var(--stat-blue);
}

.green-text {
    color: var(--stat-green);
}

.error-text {
    color: var(--effort-critical-color);
}

.pink-text {
    color: var(--stat-pink);
}

/* A page that is only a message, centred under the menu: 404, or pool stats
   that won't load (StatsLoading, whose spinner takes the theme's colours). */
.page-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 88vh;
    text-align: center;
}

.page-message .error-text {
    font-size: 18px;
}

.page-message .ui.button {
    margin-top: 1rem;
}

.page-message .ui.loader:before {
    border-color: var(--border-color);
}

.page-message .ui.loader:after {
    border-top-color: var(--stat-blue);
}

/* Data tables, a touch smaller than Semantic's text (outranking its
   .ui.table size). */
.ui.table.data-table {
    font-size: 98%;
}

/* The profit calculator's hashrate window. */
.mining-profit-dropdown {
    margin-right: 1rem;
}

/* Flex container */
.flex {
    display: flex;
}

/* Flex direction */
.flex-row {
    flex-direction: row;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.gap-3 {
    gap: 0.75rem;
}

/* Spacing */
.p-12 {
    padding: 12px;
}

.pb-8 {
    padding-bottom: 8px;
}

.mt-12 {
    margin-top: 12px;
}

.ml-8 {
    margin-left: 8px;
}

.my-16 {
    margin-top: 16px;
    margin-bottom: 16px;
}

/* Support's text, a touch larger (outranking Semantic's .ui.segment size). */
.ui.segment.help {
    font-size: 105%;
}

.help h4 {
    margin-bottom: 6px;
}

/* A first heading keeps Semantic's flush top. */
.help h4:not(:first-child) {
    margin-top: 18px;
}

.stats-container {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: var(--summary-card-spacing);
    cursor: auto;
}

/* Whatever follows the card row (notice banner, pool info, a segment or a
   table) drops its own top margin so --summary-card-spacing alone sets the
   gap; the banner's margin is inline and Semantic's components outrank a bare
   element selector, hence !important. */
.stats-container + * {
    margin-top: 0 !important;
}

.custom-stat {
    border-radius: var(--summary-card-radius);
    --stat-icon-size: calc(var(--summary-card-icon-size) * var(--summary-card-scale));
    text-align: start;
    min-width: 168px;
    padding: var(--summary-card-padding);
    /* Text stays clear of the icon: its 8px inset, its width, an 8px gap. */
    padding-inline-end: calc(var(--stat-icon-size) + 16px);
    line-height: calc(20px * var(--summary-card-scale));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    box-shadow: var(--summary-card-shadow);
    position: relative;
    background-color: var(--custom-stat-bg);
}

.stat-label {
    margin-bottom: 4px;
    color: var(--stat-label-color);
}

.stat-value {
    font-weight: bold;
    color: var(--stat-value-color);
}

/* --stat-accent (set per card by SummaryCard) colors the value and icon. */
.custom-stat .stat-value {
    color: var(--stat-accent, var(--stat-value-color));
    font-size: calc(16px * var(--summary-card-scale));
}

/* Separators inside a value ("1 / 0 / 1", "98% | 147%") stay neutral. */
.custom-stat .stat-divider {
    color: var(--secondary-text-color);
}

.custom-stat .stat-label {
    font-size: calc(15px * var(--summary-card-scale));
    margin-bottom: calc(4px * var(--summary-card-scale));
    /* In a narrow card, long single words (German compounds) wrap too
       instead of running under the icon. */
    hyphens: auto;
    overflow-wrap: anywhere;
}

.stat-icon {
    position: absolute;
    top: 50%;
    inset-inline-end: 8px;
    transform: translateY(-50%);
    color: var(--stat-accent);
    font-size: var(--stat-icon-size);
}

/* Code, wallet addresses and hashes are left-to-right even on right-to-left
   pages; isolating them keeps "solo:" from rendering as ":solo". */
[dir="rtl"] code,
[dir="rtl"] .hash {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Values take the direction of their own text, so on right-to-left pages
   "77.5 EH/s" stays "77.5 EH/s" while translated values stay right-to-left. */
[dir="rtl"] .stat-value,
[dir="rtl"] strong,
[dir="rtl"] .ui.table td {
    unicode-bidi: plaintext;
}

.custom-stat:hover {
    box-shadow: var(--summary-card-hover-shadow);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .stats-container {
        flex-wrap: wrap;
    }

    .custom-stat {
        flex: 1 1 calc(33% - 30px);
        /* 3 per row */
    }
}

@media (max-width: 768px) {
    .custom-stat {
        flex: 1 1 calc(50% - 8px);
        /* 2 per row */
    }
}

@media (max-width: 480px) {
    .stats-container {
        gap: 6px;
    }

    .custom-stat {
        flex: 1 1 calc(50% - 6px);
        /* 2 per row compact grid */
        min-width: unset;
        box-shadow: var(--summary-card-shadow-phone);
    }
}

.reward-percent {
    color: var(--stat-green);
}

.secondary-text {
    color: var(--secondary-text-color);
}

/* Orphan blocks: a normal network event — neutral gray and dimmed so it reads
   as "superseded", never as a pool error; under the pointer too. */
.ui.table tr.orphan-row,
.ui.table tr.orphan-row:hover {
    background: rgba(127, 127, 127, 0.10);
    color: var(--secondary-text-color);
    opacity: 0.8;
}

.hash {
    font-size: 98%;
    font-family: var(--font-mono);
}

/* Compact rows. The first row (servers) keeps Semantic's 1rem top padding,
   which the grid's -1rem margin cancels, so the page starts at the same gap
   under the menu as every other page. */
.ui.grid > .row.mine-server-row,
.ui.grid > .row.mine-ports-row {
    padding-bottom: 0.45rem;
}

.ui.grid > .row.mine-ports-row {
    padding-top: 0.45rem;
}

.mine-compact-segment.ui.basic.segment {
    padding-bottom: 0.35rem;
    padding-top: 0.35rem;
}

.mine-compact-segment h3 {
    margin-bottom: 0.45rem;
}

/* A region's hue (--region-* in each theme) on its badge and labels. */
.server-region-badge {
    --region-accent: var(--region-unknown);
    align-items: center;
    border: 1px solid var(--region-accent);
    border-radius: 3px;
    color: var(--region-accent);
    display: inline-flex;
    font-size: 0.88em;
    font-weight: 700;
    height: 21px;
    justify-content: center;
    line-height: 1;
    min-width: 34px;
    padding: 0 5px;
    width: max-content;
}

.region-eu { --region-accent: var(--region-eu); }
.region-ru { --region-accent: var(--region-ru); }
.region-us, .region-us-e, .region-us-w, .region-us-east, .region-us-west, .region-us-central, .region-us-ord { --region-accent: var(--region-us); }
.region-au { --region-accent: var(--region-au); }
.region-pl { --region-accent: var(--region-pl); }
.region-br { --region-accent: var(--region-br); }
.region-ca { --region-accent: var(--region-ca); }
.region-sg { --region-accent: var(--region-sg); }
.region-id { --region-accent: var(--region-id); }
.region-hk { --region-accent: var(--region-hk); }
.region-tr { --region-accent: var(--region-tr); }
.region-jp { --region-accent: var(--region-jp); }
.region-in { --region-accent: var(--region-in); }

.stratum-option {
    align-items: center;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 8px;
    min-width: 0;
}

.stratum-option .server-region-badge {
    font-size: 0.8em;
    height: 19px;
    min-width: 31px;
    padding: 0 4px;
}

.stratum-option-server {
    color: var(--primary-text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stratum-option-diff {
    color: var(--secondary-text-color);
    font-size: 0.86em;
    white-space: nowrap;
}

/* The LPRoute hint: an info banner above the server table (desktop) or under
   the list of countries (mobile). */
.route-note {
    align-items: flex-start;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: 8px;
    color: var(--primary-text-color);
    display: flex;
    gap: 10px;
    line-height: 1.4;
    margin: 10px 0 0;
    padding: 10px 14px;
}

.route-note > svg {
    color: var(--accent);
    flex: 0 0 auto;
    font-size: 18px;
    margin-top: 1px;
}

.route-note code {
    font-family: inherit;
    font-size: 1em;
}

.route-note .pool-domain {
    color: var(--accent);
}

.route-note .route-domain {
    color: var(--success);
}

/* How to Mine server finder: search and continent chips over a table of
   servers (desktop) or a list of countries that open to their servers
   (mobile). */
.server-finder-hint {
    color: var(--secondary-text-color);
    margin: -6px 0 8px;
}

.server-search {
    display: block;
    margin-bottom: 8px;
    position: relative;
}

.server-search svg {
    color: var(--secondary-text-color);
    font-size: 18px;
    inset-inline-start: 12px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.server-search input {
    background: var(--input-background);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    color: var(--primary-text-color);
    font: inherit;
    padding: 8px 12px;
    padding-inline-start: 40px;
    width: 100%;
}

.server-search input:focus {
    border-color: var(--input-focus-border);
    outline: none;
}

/* One row of chips that scrolls sideways when the names don't fit. */
.server-chips {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.server-chip {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--primary-text-color);
    cursor: pointer;
    flex: 0 0 auto;
    font: inherit;
    padding: 4px 12px;
}

.server-chip.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.server-finder-label {
    color: var(--secondary-text-color);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.server-finder-empty {
    color: var(--secondary-text-color);
}

.server-locations {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.server-location + .server-location {
    border-top: 1px solid var(--border-color);
}

/* The open country is outlined; an outline draws over its content. */
.server-location.open {
    outline: 1px solid var(--accent);
    outline-offset: -1px;
}

.server-location-head {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--primary-text-color);
    cursor: pointer;
    display: grid;
    font: inherit;
    gap: 10px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 9px 14px;
    text-align: start;
    width: 100%;
}

.server-location-flag {
    font-size: 20px;
    line-height: 1;
}

/* One line: the country, then its server count at the far end. */
.server-location-name {
    align-items: baseline;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    line-height: 1.3;
}

.server-location-name > span {
    color: var(--secondary-text-color);
    font-size: 0.9em;
}

.server-location-name > .server-location-country {
    color: var(--primary-text-color);
    font-size: 1em;
    font-weight: 700;
}

.server-location-head > svg {
    color: var(--secondary-text-color);
    font-size: 18px;
}

.server-location.open .server-location-head > svg {
    color: var(--accent);
}

.server-location-body {
    container-type: inline-size;
    padding: 0 14px 12px;
}

.server-entry + .server-entry {
    border-top: 1px solid var(--border-color);
    margin-top: 10px;
    padding-top: 10px;
}

.server-entry-title {
    align-items: center;
    display: flex;
    font-weight: 700;
    gap: 8px;
    margin-bottom: 6px;
}

.server-code {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: 4px;
    color: var(--accent-text);
    font-size: 0.8em;
    padding: 1px 6px;
}

.server-address {
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.server-address + .server-address {
    margin-top: 6px;
}

/* A long address wraps (after a hyphen when it can) rather than being cut:
   it has to be readable in full. */
.server-address code {
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 13px;
    overflow-wrap: anywhere;
    padding: 6px 10px;
}

.server-copy-button {
    align-items: center;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
    border-radius: 6px;
    color: var(--accent-text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 700;
    gap: 6px;
    padding: 0 12px;
}

.server-copy-button.copied {
    background: color-mix(in srgb, var(--success) 10%, transparent);
    border-color: var(--success);
    color: var(--success-text);
}

/* "Copy" and "Copied" share one grid cell, so the button keeps the width of
   the longer label and nothing moves when it flips. */
.server-copy-label {
    display: grid;
}

.server-copy-label > span {
    grid-area: 1 / 1;
}

.server-copy-label > [aria-hidden="true"] {
    visibility: hidden;
}

/* Desktop: a slim toolbar over a dense table, about 27px per row. */
.server-finder-toolbar {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}

.server-finder-toolbar .server-search {
    flex: 0 1 420px;
    margin: 0;
}

.server-finder-toolbar .server-search input {
    padding-block: 5px;
}

.server-finder-toolbar .server-chips {
    margin: 0;
}

.server-finder-toolbar .server-chip {
    padding: 2px 12px;
}

.server-finder-count {
    color: var(--secondary-text-color);
    margin-inline-start: auto;
    white-space: nowrap;
}

/* Scrolls sideways rather than squeezing addresses on narrower desktops. */
.server-table-wrap {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow-x: auto;
}

.server-table {
    background: var(--segment-background);
    border-collapse: collapse;
    width: 100%;
}

.server-table th {
    background: var(--table-header-background);
    color: var(--primary-text-color);
    font-weight: 700;
    padding: 6px 8px;
    text-align: start;
}

.server-table td {
    border-top: 1px solid var(--border-color);
    color: var(--primary-text-color);
    padding: 2px 8px;
    white-space: nowrap;
}

.server-table tbody tr:hover td {
    background: var(--table-hover-background);
}

.server-table tr.copied td {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.server-table-location {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.server-table-location .flag {
    margin: 0;
}

.server-table .server-code {
    font-size: 0.75em;
}

.server-table code {
    font-family: var(--font-mono);
    font-size: 13px;
}

/* Copy cells hug their button. */
.server-table-copy {
    width: 1%;
}

.server-table .server-copy-button {
    font-size: 12px;
    gap: 4px;
    padding: 1px 8px;
}

/* Where the longest address (port included, ~290px) and the longest "Copy"
   label (Russian, ~130px) can't share a line, the buttons keep only their
   icon and addresses drop to 12px, so they stay on one line from 390px
   phones up. */
@container (max-width: 422px) {
    .server-copy-button > span {
        display: none;
    }

    .server-address code {
        font-size: 12px;
    }
}

.my-fieldset {
    border: none;
    padding: 0;
}

.cursor-pointer {
    cursor: pointer;
}

.ui.segment.active.tab.bottom.attached {
    padding: 16px 0;
    overflow-x: auto;
    border-radius: 3px;
}

/* Mobile miner-stats tab menu: every tab in view. Tabs that don't fit wrap
   onto another row instead of scrolling, and grow to fill their row; on phones
   a row holds at most three, so the five split 3 + 2. The lines between tabs
   are the 1px gaps over the menu's background, in the border color, so
   Semantic's dividers are cleared. */
.ui.wrapped.menu {
    flex-wrap: wrap;
    gap: 1px;
    background-color: var(--border-color);
    border-radius: 3px;
}

/* The transparent border matches the active tab's, so every row is as tall
   and a label doesn't move when its tab becomes active. */
.ui.wrapped.menu .item {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    padding: 10px 8px;
    font-size: 0.95em;
    border: 1px solid transparent;
}

.ui.wrapped.menu .item::before {
    background: transparent;
}

/* Semantic's clearfix would take a slot, and a gap, at the end of the last row. */
.ui.wrapped.menu::after {
    content: none;
}

/* Not the -1px that sinks a tab into a tabular menu's bottom border: here it
   would push the active tab past its row. */
.ui.wrapped.menu .item.active {
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .ui.wrapped.menu .item {
        flex-basis: 30%;
    }
}

.content {
    color: var(--primary-text-color);
}

.fixed-top-menu {
    position: fixed;
    top: 0;
    left: -12px;
    right: 0;
    width: 100%;
    max-width: 1268px;
    /* Set the maximum width you want for the menu */
    margin: 0 auto;
    /* Center the menu */
    padding: 0 var(--page-gutter);
    /* Match the content container gutter so the bar lines up with the content */
    z-index: 1000;
    /* Ensure the menu stays on top of other elements */
}

/* The menu is --nav-height tall; items have no vertical padding because
   Semantic already centres their content. To fit every UI language on one row
   they are tighter than Semantic's default, and below the menu's 1268px
   max-width tighter still and without icons. */
.fixed-top-menu .ui.menu {
    min-height: var(--nav-height);
}

.fixed-top-menu .ui.menu .item {
    padding: 0 12px;
}

/* No dividers between items. Semantic draws them as a translucent dark line
   that only shows on a light menu. The line is made transparent rather than
   removed: with display: none, Chrome renders the menu text with greyscale
   instead of subpixel anti-aliasing. */
.fixed-top-menu .ui.menu .item:before {
    background: transparent;
}

/* The current page's item is shaped like the active tab of a tabular menu
   (the Your Stats tabs): bordered, with a bold label. Semantic marks an open
   dropdown active too; it gets neither, so it doesn't read as the current
   page and its label doesn't widen as the menu opens. */
.fixed-top-menu .ui.menu .item.active:not(.dropdown) {
    font-weight: bold;
}

.fixed-top-menu .ui.menu .dropdown.item.active {
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
}

/* The sun/moon theme button in both top bars: just the icon, no button chrome. */
.theme-toggle {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    line-height: 0;
    padding: 0;
}

@media (max-width: 1267px) {
    .fixed-top-menu .ui.menu .item {
        padding: 0 8px;
    }

    .fixed-top-menu .ui.menu > .item > svg {
        display: none;
    }
}

.fixed-top-menu-mobile {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100vw;
    z-index: 1000;
    /* width: 100vw keeps the bar pinned edge-to-edge regardless of horizontal
       overflow in the document below. */
}

/* Language picker: a header over a grid of native names. It opens from a fixed
   bar, so it can't be scrolled into view: cap it to the viewport and let it
   scroll instead. */
.ui.dropdown .menu.language-menu {
    max-height: 80vh;
    overflow-y: auto;
}

.ui.dropdown .menu.language-menu.visible {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 480px;
}

.ui.dropdown .menu.language-menu > .header {
    grid-column: 1 / -1;
    letter-spacing: 0.08em;
}

/* No cell borders, not even the hover one: it would grow the hovered cell and
   shift every row below it. */
.ui.dropdown .menu.language-menu > .item {
    border: none;
}

/* Hover fills the cell instead. Semantic UI makes the hover nearly transparent
   for dropdowns inside a menu (the desktop bar); restore the theme's fill. */
.ui.menu .ui.dropdown .menu.language-menu > .item:hover {
    background-color: var(--dropdown-hover-background);
}

.ui.dropdown .menu.language-menu > .item.active {
    border-inline-start: 3px solid var(--stat-blue);
}

/* In a right-to-left page the desktop picker sits at the left end of the menu,
   so it must open rightwards. */
[dir="rtl"] .ui.menu .right.menu .dropdown:last-child > .menu.language-menu {
    left: 0;
    right: auto;
}

/* Phones: a full-width panel under the bar, two columns. The picker is
   position: static (below), so the panel is placed against the fixed bar. */
.fixed-top-menu-mobile .ui.dropdown .menu.language-menu {
    top: 100%;
    left: var(--page-gutter);
    right: var(--page-gutter);
}

.fixed-top-menu-mobile .ui.dropdown .menu.language-menu.visible {
    width: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The language picker sits on the blue bar like its icon neighbours, not in
   the boxed style .ui.dropdown gives form dropdowns. */
.fixed-top-menu-mobile .ui.dropdown {
    position: static;
    border: none;
    background-color: transparent;
    color: var(--on-accent);
    font-weight: 700;
}

/* Solo Mining Toggle */
.solo-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.solo-toggle input {
    display: none;
}

.solo-toggle-track {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--toggle-off-background);
    border-radius: 10px;
    transition: background 0.2s;
}

.solo-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--on-accent);
    border-radius: 50%;
    transition: transform 0.2s;
}

.solo-toggle input:checked~.solo-toggle-track {
    background: var(--green);
}

.solo-toggle input:checked~.solo-toggle-track .solo-toggle-thumb {
    transform: translateX(16px);
}

.solo-toggle-label {
    font-size: 14px;
    color: var(--primary-text-color);
}

/* Segmented Buttons (Stats / Info) */
.worker-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 0 8px 8px;
}

.worker-toolbar-note {
    color: var(--secondary-text-color);
    flex: 1 1 320px;
    line-height: 1.35;
    min-width: 0;
}

.segmented-buttons {
    display: inline-flex;
    border-radius: 5px;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.seg-btn {
    min-width: 70px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    background: var(--stat-background);
    color: var(--primary-text-color);
    transition: background 0.15s, color 0.15s;
}

.seg-btn:hover {
    background: var(--button-hover-background);
}

.seg-btn-active {
    background: var(--green);
    color: var(--on-accent);
}

.seg-btn-active:hover {
    background: color-mix(in srgb, var(--green) 90%, black);
}

/* --- PoolInfoBar (ported from c3eadac) --- */
.pool-info-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 8px;
    line-height: 1.25;
}

.pool-info-compact {
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--segment-background);
}

.pool-info-title {
    display: inline-flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 5px 8px;
    align-items: center;
    color: var(--primary-text-color);
    font-size: 18px;
    font-weight: 700;
}

.pool-info-compact .pool-info-title {
    font-size: 14px;
}

.pool-info-logo,
.pool-info-logo-fallback {
    width: 25px;
    height: 25px;
    flex: 0 0 auto;
    border-radius: 50%;
}

.pool-info-logo {
    object-fit: cover;
}

.pool-info-logo-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--stat-blue);
    color: var(--on-accent);
    font-size: 12px;
    font-weight: 700;
}

.pool-info-mode {
    color: var(--secondary-text-color);
    font-weight: 700;
}

.pool-info-algo {
    color: var(--stat-green);
    font-size: 0.9em;
    font-weight: 700;
}

.pool-info-links {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 12px;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}

.pool-info-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.pool-info-link-website svg {
    color: var(--accent);
}

.pool-info-link-wallet svg {
    color: var(--accent-gold);
}

.pool-info-link-explorer svg {
    color: #13c2c2;
}

.pool-info-link-source svg {
    color: #8b949e;
}

.pool-info-link-discord svg {
    color: var(--discord);
}

.pool-info-link-telegram svg {
    color: #26a5e4;
}

.pool-info-link-x svg {
    color: #1d9bf0;
}

.pool-info-link-p2p svg {
    color: #13a10e;
}

.pool-info-link-resource svg {
    color: var(--accent);
}

.pool-info-divider {
    color: var(--secondary-text-color);
    opacity: 0.8;
}

.pool-info-link svg {
    margin-right: 0;
}

@media (max-width: 600px) {
    .pool-info-bar { gap: 7px 12px; justify-content: flex-start; }
    .pool-info-title { font-size: 15px; }
    .pool-info-logo, .pool-info-logo-fallback { width: 21px; height: 21px; }
    .pool-info-links { gap: 10px 16px; justify-content: flex-start; margin-left: 0; width: 100%; }
    /* Icon-only on mobile to save space; bump the icon a touch for tap targets. */
    .pool-info-link { font-size: 12px; }
    .pool-info-link svg { font-size: 1.3em; }
    .pool-info-link > span { display: none; }
    /* Exchanges keep their full name so users can read where to trade. */
    .pool-info-link-exchange > span { display: inline; }
}

/* --- Notice dialog (components/notice-dialog.jsx) --- */
.notice-dialog {
    position: relative; max-width: 560px; width: 100%; margin: 0 auto;
    padding: 30px 30px 22px; border-radius: 18px; color: #fff; text-align: left; overflow: hidden;
    background:
        radial-gradient(90% 120% at 88% 0%, var(--nd-glow) 0%, transparent 55%),
        linear-gradient(105deg, var(--nd-bg-from) 0%, var(--nd-bg-mid) 52%, var(--nd-bg-to) 100%);
    border: 1px solid var(--nd-border);
    box-shadow: 0 34px 90px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
}
/* One palette per level; the accent colours the eyebrow, stat, button and focus ring. */
.notice-dialog--success {
    --nd-glow: rgba(89, 153, 102, 0.32); --nd-border: rgba(113, 204, 139, 0.3);
    --nd-bg-from: #08120c; --nd-bg-mid: #1e3626; --nd-bg-to: #2d4e37;
    --nd-accent: #71cc8b; --nd-on-accent: #052e16; --nd-body: rgba(224, 240, 229, 0.78);
    --nd-bar: var(--nd-accent);
}
.notice-dialog--warn {
    --nd-glow: rgba(217, 119, 6, 0.42); --nd-border: rgba(251, 191, 36, 0.4);
    --nd-bg-from: #1c1203; --nd-bg-mid: #3f2a06; --nd-bg-to: #5e3d08;
    --nd-accent: #fbbf24; --nd-on-accent: #2a1a03; --nd-body: rgba(254, 243, 199, 0.8);
    --nd-bar: repeating-linear-gradient(-45deg, #f59e0b 0 14px, #1c1203 14px 28px);
}
.notice-dialog--error {
    --nd-glow: rgba(180, 30, 45, 0.45); --nd-border: rgba(244, 90, 100, 0.4);
    --nd-bg-from: #240711; --nd-bg-mid: #470f1b; --nd-bg-to: #6a1522;
    --nd-accent: #fbbf24; --nd-on-accent: #2a0810; --nd-body: rgba(255, 228, 228, 0.78);
    --nd-bar: repeating-linear-gradient(-45deg, #f59e0b 0 14px, #170509 14px 28px);
}
.notice-dialog::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
    background: var(--nd-bar); opacity: 0.92;
}
.notice-dialog__close {
    position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
    color: rgba(255,255,255,0.7); cursor: pointer; font-size: 0.82rem; line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
}
.notice-dialog__close:hover { background: rgba(255,255,255,0.18); color: #fff; }
.notice-dialog__eyebrow {
    display: inline-flex; align-items: center; gap: 9px; margin: 6px 0 14px;
    color: var(--nd-accent); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.notice-dialog__dot {
    width: 9px; height: 9px; border-radius: 50%; background: var(--nd-accent);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--nd-accent) 55%, transparent); animation: noticeDialogPulse 1.7s 3; /* a few pulses, then still: an endless box-shadow animation repaints every frame */
}
@keyframes noticeDialogPulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nd-accent) 55%, transparent); }
    70%  { box-shadow: 0 0 0 11px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.notice-dialog__title { margin: 0 0 8px; font-size: clamp(1.55rem, 4.2vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; color: #fff; }
.notice-dialog__body { margin: 0 0 20px; max-width: 50ch; color: var(--nd-body); font-size: 0.97rem; line-height: 1.5; }
.notice-dialog__hero {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px;
    padding: 16px 0; border-top: 1px solid rgba(255,255,255,0.09); border-bottom: 1px solid rgba(255,255,255,0.09);
}
.notice-dialog__pct {
    font-size: clamp(2.5rem, 8.5vw, 3.5rem); font-weight: 800; line-height: 1; color: var(--nd-accent);
    letter-spacing: -0.03em; font-variant-numeric: tabular-nums; text-shadow: 0 0 26px color-mix(in srgb, var(--nd-accent) 35%, transparent);
}
.notice-dialog__statlabel { margin-top: 6px; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.66rem; font-weight: 700; color: rgba(255,255,255,0.55); }
.notice-dialog__ctacol { display: flex; flex-direction: column; gap: 10px; }
.notice-dialog__cta {
    display: inline-block; text-align: center; text-decoration: none;
    padding: 11px 20px; border-radius: 10px; font-weight: 800; font-size: 0.95rem;
    background: var(--nd-accent); color: var(--nd-on-accent); cursor: pointer; border: none;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--nd-accent) 28%, transparent);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.notice-dialog__cta:hover {
    background: color-mix(in srgb, var(--nd-accent) 80%, white); transform: translateY(-1px);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--nd-accent) 42%, transparent);
}
.notice-dialog__cta--ghost { background: transparent; color: #fff; box-shadow: none; font-weight: 700; border: 1px solid rgba(255,255,255,0.3); }
.notice-dialog__cta--ghost:hover { background: rgba(255,255,255,0.08); border-color: #fff; }
.notice-dialog__foot { display: flex; justify-content: flex-end; gap: 20px; margin-top: 18px; }
.notice-dialog__link { background: none; border: none; cursor: pointer; padding: 6px 2px; color: rgba(255,255,255,0.7); font-size: 0.88rem; font-weight: 600; transition: color 0.15s ease; }
.notice-dialog__link:hover { color: #fff; text-decoration: underline; }
.notice-dialog__link--mut { color: rgba(255,255,255,0.42); }
.notice-dialog__link--mut:hover { color: rgba(255,255,255,0.85); }
.notice-dialog a:focus-visible, .notice-dialog button:focus-visible { outline: 2px solid var(--nd-accent); outline-offset: 2px; border-radius: 6px; }
@media (max-width: 480px) {
    .notice-dialog { padding: 24px 20px 18px; }
    .notice-dialog__hero { flex-direction: column; align-items: flex-start; }
    .notice-dialog__ctacol, .notice-dialog__cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .notice-dialog__dot { animation: none; } }