Mediawiki:common.css

Вернуться

Строка 2598: Строка 2598:
   width: 100vw;
   width: 100vw;
}
}
/* СМ:Главная - начало ---------------------------------------------------------- */
.scmc-page {
    max-width: 1180px;
    margin: 0 auto;
}
.scmc-hero {
    text-align: center;
    padding: 34px 18px 28px;
}
.scmc-hero-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    max-width: 880px;
    margin: 0 auto 14px;
}
.scmc-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.scmc-logo img {
    max-width: 86px;
    max-height: 86px;
    height: auto;
}
.scmc-title {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #f2f4f7;
    font-size: 64px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0 2px 4px #000;
}
.scmc-subtitle {
    max-width: 780px;
    margin: 0 auto;
    color: #c7ced8;
    font-size: 16px;
    line-height: 1.65;
}
.scmc-divider {
    border-bottom: 2px solid rgba(169,169,169,.65);
    margin: 20px 0 26px;
}
.scmc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.scmc-wide {
    display: grid;
    grid-template-columns: 1.25fr .9fr 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}
.scmc-card {
    border: 1px solid rgba(120,140,155,.22);
    border-radius: 10px;
    background: rgba(12,16,21,.78);
    overflow: hidden;
    min-height: 0;
}
.scmc-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 9px 14px;
    border-bottom: 1px solid rgba(120,140,155,.18);
    background: rgba(24,29,36,.72);
    color: #f2f4f7;
    font-size: 17px;
    font-weight: 800;
}
.scmc-card-body {
    padding: 14px;
    color: #c7ced8;
    line-height: 1.6;
    min-height: 0;
}
.scmc-card-body p {
    margin: 0 0 12px;
}
.scmc-card-body p:last-child {
    margin-bottom: 0;
}
.scmc-card-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
}
.scmc-card-icon img {
    max-width: 28px;
    max-height: 28px;
}
.scmc-link-list {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.scmc-link-list li {
    margin: 0;
}
.scmc-link-list a,
.scmc-link-list a:visited {
    display: block;
    padding: 8px 10px;
    border: 1px solid rgba(120,140,155,.16);
    border-radius: 7px;
    background: rgba(18,23,29,.58);
    color: #dce8f2 !important;
    font-weight: 650;
    text-decoration: none !important;
    transition: background .18s ease, border-color .18s ease;
}
.scmc-link-list a:hover {
    background: rgba(28,36,45,.78);
    border-color: rgba(128,178,210,.38);
    text-decoration: none !important;
}
.scmc-note {
    margin-top: 10px;
    border-left: 3px solid rgba(128,178,210,.62);
    background: rgba(18,28,36,.54);
    border-radius: 7px;
    padding: 10px 12px;
    color: #d4dde6;
}
.scmc-muted {
    color: #9faab6;
    font-size: 14px;
}
.scmc-card-marines {
    border-color: rgba(130,155,95,.34);
}
.scmc-card-marines .scmc-card-head {
    background: linear-gradient(90deg, rgba(38,52,31,.92), rgba(22,29,20,.78));
    border-bottom-color: rgba(130,155,95,.35);
}
.scmc-card-marines .scmc-link-list a {
    border-left: 4px solid #8c9b63;
    background: rgba(28,40,24,.58);
}
.scmc-card-marines .scmc-link-list a:hover {
    background: rgba(38,54,31,.78);
    border-color: rgba(140,155,99,.50);
}
.scmc-card-xenos {
    border-color: rgba(154,99,176,.34);
}
.scmc-card-xenos .scmc-card-head {
    background: linear-gradient(90deg, rgba(58,36,66,.92), rgba(26,20,31,.78));
    border-bottom-color: rgba(154,99,176,.35);
}
.scmc-card-xenos .scmc-link-list a {
    border-left: 4px solid #9a63b0;
    background: rgba(42,23,52,.58);
}
.scmc-card-xenos .scmc-link-list a:hover {
    background: rgba(55,31,68,.78);
    border-color: rgba(154,99,176,.50);
}
.scmc-card-rules .scmc-card-head {
    background: linear-gradient(90deg, rgba(46,50,58,.90), rgba(24,28,34,.78));
}
.scmc-card-reference .scmc-card-head {
    background: linear-gradient(90deg, rgba(35,45,56,.90), rgba(20,25,31,.78));
}
.scmc-card-lore .scmc-card-head {
    background: linear-gradient(90deg, rgba(46,38,31,.90), rgba(24,21,18,.78));
}
.scmc-card-about .scmc-card-head {
    background: linear-gradient(90deg, rgba(28,31,36,.90), rgba(18,20,24,.78));
}
.scmc-card-rules .scmc-link-list a,
.scmc-card-reference .scmc-link-list a,
.scmc-card-lore .scmc-link-list a {
    white-space: nowrap;
}
.scmc-footerline {
    margin-top: 22px;
    padding-top: 12px;
    border-top: 1px solid rgba(120,140,155,.18);
    color: #98a6b5;
    font-size: 13px;
    text-align: center;
}
.scmc-page a.external {
    background-image: none !important;
    padding-right: 0 !important;
}
.scmc-page a.external::after {
    content: none !important;
}
@media screen and (max-width: 1050px) {
    .scmc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .scmc-wide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .scmc-card-rules .scmc-link-list a,
    .scmc-card-reference .scmc-link-list a,
    .scmc-card-lore .scmc-link-list a {
        white-space: normal;
    }
}
@media screen and (max-width: 700px) {
    .scmc-page {
        max-width: 100%;
    }
    .scmc-hero {
        padding: 24px 10px 22px;
    }
    .scmc-hero-row {
        gap: 10px;
        max-width: 100%;
    }
    .scmc-logo img {
        max-width: 54px;
        max-height: 54px;
    }
    .scmc-title {
        font-size: 34px;
        letter-spacing: .06em;
    }
    .scmc-subtitle {
        font-size: 14px;
        line-height: 1.55;
    }
    .scmc-grid,
    .scmc-wide {
        grid-template-columns: 1fr;
    }
    .scmc-card-head {
        font-size: 16px;
    }
}
.scmc-map-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}
.scmc-map-grid > p {
    display: contents;
}
.scmc-map-grid a,
.scmc-map-grid a:visited,
.scmc-map-grid a.external,
.scmc-map-grid a.external:visited {
    display: block;
    width: 100%;
    height: 205px;
    box-sizing: border-box;
    color: inherit !important;
    text-decoration: none !important;
    background-image: none !important;
    padding-right: 0 !important;
}
.scmc-map-grid a.external::after {
    content: none !important;
}
.scmc-map-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 205px;
    overflow: hidden;
    border: 1px solid rgba(120,140,155,.24);
    border-radius: 9px;
    background: rgba(12,16,21,.88);
    box-sizing: border-box;
    transition:
        border-color .22s ease,
        box-shadow .22s ease;
}
.scmc-map-card:hover {
    border-color: rgba(128,178,210,.55);
    box-shadow: 0 0 16px rgba(80,145,190,.22);
}
.scmc-map-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 9px;
    background:
        linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.78)),
        linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.16));
    pointer-events: none;
    transition: background .22s ease;
}
.scmc-map-card:hover::after {
    background:
        linear-gradient(180deg, rgba(0,0,0,.24), rgba(0,0,0,.88)),
        linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.24));
}
.scmc-map-card .mw-file-description,
.scmc-map-card .mw-file-element {
    display: block;
    overflow: hidden;
    border-radius: 9px;
}
.scmc-map-card img.scmc-map-bg,
.scmc-map-card .scmc-map-bg img,
.scmc-map-card .scmc-map-bg .mw-file-element {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    object-position: center center;
    border-radius: 9px;
    transition:
        transform .28s cubic-bezier(.2,.8,.2,1),
        filter .22s ease;
}
.scmc-map-card:hover img.scmc-map-bg,
.scmc-map-card:hover .scmc-map-bg img,
.scmc-map-card:hover .scmc-map-bg .mw-file-element {
    transform: scale(1.025);
    filter: brightness(.88) saturate(1.06);
}
.scmc-map-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    width: 100%;
    padding: 14px;
    color: #f2f4f7;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
    text-shadow: 0 2px 4px #000;
    box-sizing: border-box;
}
.scmc-map-subtitle {
    display: block;
    margin-top: 4px;
    color: #c7ced8;
    font-size: 13px;
    font-weight: 600;
}
.scmc-map-lore {
    position: fixed !important;
    top: 92px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 2147483647 !important;
    display: none !important;
    width: min(1100px, calc(100vw - 80px)) !important;
    min-height: 42px;
    max-height: none !important;
    margin: 0 !important;
    padding: 14px 18px !important;
    box-sizing: border-box;
    border: 1px solid rgba(128,178,210,.75);
    border-radius: 9px;
    background: rgba(25,28,35,.97);
    box-shadow: 0 0 32px rgba(0,0,0,.65);
    color: #eef3f8 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
    text-align: left !important;
    text-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    pointer-events: none !important;
    transform: translateX(-50%) !important;
}
.scmc-map-card:hover .scmc-map-lore {
    display: block !important;
}
@media screen and (max-width: 1050px) {
    .scmc-map-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media screen and (max-width: 700px) {
    .scmc-map-grid {
        grid-template-columns: 1fr;
    }
    .scmc-map-grid a,
    .scmc-map-grid a:visited,
    .scmc-map-grid a.external,
    .scmc-map-grid a.external:visited {
        height: 190px;
    }
    .scmc-map-card {
        height: 190px;
    }
    .scmc-map-lore {
        top: 72px !important;
        width: calc(100vw - 28px) !important;
        padding: 12px 14px !important;
        font-size: 13px !important;
    }
}
.scmc-role-page {
    margin-top: 12px;
}
.scmc-role-lead {
    margin: 10px 0 14px 0;
    padding: 10px 12px;
    border-left: 4px solid #619CCD;
    background: rgba(18,23,29,.45);
    color: #dce8f2;
    line-height: 1.55;
    box-sizing: border-box;
}
.scmc-role-note {
    margin: 10px 0;
    padding: 9px 11px;
    border: 1px solid rgba(128,178,210,.22);
    border-radius: 8px;
    background: rgba(24,31,39,.52);
    color: #cbd6e2;
    box-sizing: border-box;
}
.scmc-role-warning {
    margin: 10px 0;
    padding: 9px 11px;
    border: 1px solid rgba(220,90,90,.25);
    border-radius: 8px;
    background: rgba(90,28,28,.18);
    color: #e7d6d6;
    box-sizing: border-box;
}
.scmc-role-gear {
    position: relative;
    z-index: 2;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}
.scmc-role-gear .nomobile {
    max-width: 100%;
}
.scmc-role-gear table {
    max-width: 100%;
}
.scmc-role-gear img {
    max-width: none;
}
.scmc-role-skills {
    max-width: 420px;
}
.scmc-role-skills th {
    background: #467843;
}
.scmc-role-skills td:last-child {
    width: 90px;
    text-align: center;
    font-weight: 700;
}
@media screen and (max-width: 700px) {
    .scmc-role-lead,
    .scmc-role-note,
    .scmc-role-warning {
        padding: 8px 10px;
    }
    .scmc-role-gear {
        overflow-x: auto;
    }
    .scmc-role-skills {
        width: auto;
        max-width: 100%;
    }
}
.scmc-hub {
    display: grid;
    gap: 14px;
    scroll-behavior: smooth;
}
.scmc-hub-nav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    clear: both !important;
    width: 100% !important;
    margin: 0 0 18px !important;
    padding: 10px !important;
    border: 1px solid rgba(120,140,155,.16);
    border-radius: 14px;
    background:
        radial-gradient(circle at 12% 0%, rgba(128,178,210,.08), transparent 34%),
        linear-gradient(135deg, rgba(128,178,210,.04), transparent 56%),
        rgba(8,11,16,.50);
    box-shadow:
        inset 0 0 20px rgba(0,0,0,.18),
        0 10px 28px rgba(0,0,0,.12);
    box-sizing: border-box !important;
}
.scmc-hub-nav-item {
    --nav-accent: #8fc7ef;
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.scmc-hub-nav-item a,
.scmc-hub-nav-item a:visited {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--nav-accent) 34%, rgba(120,140,155,.18));
    border-radius: 10px;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--nav-accent) 16%, transparent), transparent 72%),
        rgba(18,23,29,.70);
    color: #dce8f2 !important;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    box-shadow:
        inset 0 0 12px color-mix(in srgb, var(--nav-accent) 8%, transparent),
        0 0 0 rgba(0,0,0,0);
    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease,
        color .16s ease;
    box-sizing: border-box !important;
}
.scmc-hub-nav-item a::before {
    content: "";
    width: 7px;
    height: 7px;
    min-width: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--nav-accent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--nav-accent) 70%, transparent);
}
.scmc-hub-nav-item a:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--nav-accent) 68%, rgba(128,178,210,.52));
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--nav-accent) 27%, transparent), transparent 76%),
        rgba(28,36,45,.94);
    color: #f2f4f7 !important;
    box-shadow:
        inset 0 0 14px color-mix(in srgb, var(--nav-accent) 12%, transparent),
        0 0 14px color-mix(in srgb, var(--nav-accent) 18%, transparent);
    text-decoration: none !important;
}
.scmc-hub-nav-command {
    --nav-accent: #5967bd;
}
.scmc-hub-nav-support {
    --nav-accent: #db7e53;
}
.scmc-hub-nav-engineering {
    --nav-accent: #e6c65a;
}
.scmc-hub-nav-medical {
    --nav-accent: #69b9df;
}
.scmc-hub-nav-police {
    --nav-accent: #ff5964;
}
.scmc-hub-nav-cargo {
    --nav-accent: #db7e53;
}
.scmc-hub-nav-marines {
    --nav-accent: #8c9b63;
}
.scmc-hub-nav-other,
.scmc-hub-nav-respondent {
    --nav-accent: #9faab6;
}
@media screen and (max-width: 900px) {
    .scmc-hub-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media screen and (max-width: 520px) {
    .scmc-hub-nav {
        grid-template-columns: 1fr !important;
        padding: 8px !important;
    }
    .scmc-hub-nav-item a,
    .scmc-hub-nav-item a:visited {
        min-height: 32px;
        font-size: 12px;
    }
}
.scmc-hub-dept {
    --hub-accent: #8c9b63;
    position: relative;
    border: 1px solid rgba(120,140,155,.22);
    border-left: 4px solid var(--hub-accent);
    border-radius: 12px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--hub-accent) 12%, transparent), transparent 38%),
        rgba(12,16,21,.78);
    overflow: visible;
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
    scroll-margin-top: 16px;
}
.scmc-hub-dept::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    pointer-events: none;
    background:
        radial-gradient(circle at 16px 14px, color-mix(in srgb, var(--hub-accent) 22%, transparent), transparent 34%),
        linear-gradient(90deg, color-mix(in srgb, var(--hub-accent) 10%, transparent), transparent 42%);
    opacity: .75;
}
.scmc-hub-command {
    --hub-accent: #5967bd;
}
.scmc-hub-support,
.scmc-hub-cargo {
    --hub-accent: #db7e53;
}
.scmc-hub-engineering {
    --hub-accent: #e6c65a;
}
.scmc-hub-medical {
    --hub-accent: #69b9df;
}
.scmc-hub-police {
    --hub-accent: #ff5964;
}
.scmc-hub-marines {
    --hub-accent: #8c9b63;
}
.scmc-hub-other,
.scmc-hub-respondent {
    --hub-accent: #9faab6;
}
.scmc-hub-dept-head,
.scmc-hub-role-grid,
.scmc-guide-pack,
.scmc-hub-guide-split {
    position: relative;
    z-index: 1;
}
.scmc-hub-dept-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(120,140,155,.18);
    border-radius: 12px 12px 0 0;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--hub-accent) 24%, rgba(24,29,36,.92)), rgba(18,23,29,.78));
}
.scmc-hub-dept-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 86px;
    min-width: 86px;
    height: 86px;
    border: 1px solid color-mix(in srgb, var(--hub-accent) 32%, rgba(120,140,155,.18));
    border-radius: 10px;
    background: rgba(8,11,16,.42);
    box-shadow: inset 0 0 18px color-mix(in srgb, var(--hub-accent) 14%, transparent);
}
.scmc-hub-dept-icon img {
    max-width: 86px;
    max-height: 86px;
    image-rendering: pixelated;
}
.scmc-hub-dept-info {
    min-width: 0;
}
.scmc-hub-dept-title {
    color: #f2f4f7;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.1;
    text-shadow: 0 2px 4px #000;
}
.scmc-hub-dept-title a,
.scmc-hub-dept-title a:visited {
    color: #f2f4f7 !important;
    text-decoration: none !important;
}
.scmc-hub-dept-title a:hover {
    color: #8fc7ef !important;
}
.scmc-hub-dept-meta {
    margin-top: 6px;
    color: #c7ced8;
    font-size: 14px;
    line-height: 1.45;
}
.scmc-hub-role-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    align-items: stretch;
}
.scmc-hub-role-grid-2 .scmc-hub-role-card {
    flex-basis: 330px;
}
.scmc-hub-role-grid-3 .scmc-hub-role-card {
    flex-basis: 260px;
}
.scmc-hub-role-grid-4 .scmc-hub-role-card {
    flex-basis: 210px;
}
.scmc-hub-role-grid-5 .scmc-hub-role-card {
    flex-basis: 185px;
}
.scmc-hub-role-card {
    --card-glow: color-mix(in srgb, var(--hub-accent) 18%, transparent);
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-rows: 150px auto;
    gap: 8px;
    flex-grow: 1;
    min-width: 175px;
    min-height: 100%;
    padding: 10px;
    border: 1px solid rgba(120,140,155,.18);
    border-radius: 10px;
    background: rgba(18,23,29,.62);
    box-sizing: border-box;
    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}
.scmc-hub-role-card:hover {
    z-index: 999999;
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--hub-accent) 58%, rgba(128,178,210,.42));
    background: rgba(24,31,39,.86);
    box-shadow: 0 0 18px var(--card-glow);
}
.scmc-hub-role-card[data-desc]:hover::after {
    content: attr(data-desc);
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%);
    z-index: 2147483647;
    width: max-content;
    max-width: min(310px, calc(100vw - 40px));
    padding: 9px 11px;
    border: 1px solid color-mix(in srgb, var(--hub-accent) 55%, rgba(128,178,210,.45));
    border-radius: 8px;
    background: rgba(18,23,29,.98);
    color: #dce8f2;
    box-shadow: 0 14px 36px rgba(0,0,0,.62);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    pointer-events: none;
    white-space: normal;
}
.scmc-hub-role-card[data-desc]:hover::before {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100% + 3px);
    transform: translateX(-50%) rotate(45deg);
    z-index: 2147483647;
    width: 10px;
    height: 10px;
    background: rgba(18,23,29,.98);
    border-left: 1px solid color-mix(in srgb, var(--hub-accent) 55%, rgba(128,178,210,.45));
    border-top: 1px solid color-mix(in srgb, var(--hub-accent) 55%, rgba(128,178,210,.45));
    pointer-events: none;
}
.scmc-hub-role-image {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
}
.scmc-hub-role-image img {
    max-width: 150px;
    max-height: 150px;
    image-rendering: pixelated;
    transition: transform .16s ease;
}
.scmc-hub-role-card:hover .scmc-hub-role-image img {
    transform: scale(1.035);
}
.scmc-hub-role-name {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dce8f2;
    font-weight: 850;
    line-height: 1.25;
    text-align: center;
}
.scmc-hub-role-name a,
.scmc-hub-role-name a:visited {
    color: #dce8f2 !important;
    text-decoration: none !important;
}
.scmc-hub-role-name a:hover {
    color: #8fc7ef !important;
}
.scmc-hub-role-desc {
    display: none !important;
}
.scmc-guide-pack {
    display: grid;
    gap: 7px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--hub-accent) 20%, rgba(120,140,155,.16));
    border-radius: 10px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--hub-accent) 9%, transparent), transparent 60%),
        rgba(8,11,16,.28);
}
.scmc-guide-pack-wide {
    margin: 0 12px 12px;
}
.scmc-guide-pack-title {
    color: #dce8f2;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.scmc-guide-pack-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.scmc-guide-pack-list li {
    margin: 0;
    padding: 0;
}
.scmc-guide-pack-list a,
.scmc-guide-pack-list a:visited {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 5px 8px;
    border: 1px solid rgba(120,140,155,.16);
    border-radius: 999px;
    background: rgba(18,23,29,.58);
    color: #cbd6e2 !important;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.2;
    text-decoration: none !important;
}
.scmc-guide-pack-list a:hover {
    border-color: color-mix(in srgb, var(--hub-accent) 50%, rgba(128,178,210,.44));
    background: rgba(28,36,45,.82);
    color: #f2f4f7 !important;
    text-decoration: none !important;
}
.scmc-guide-pack-empty {
    color: #7f8d9b;
    font-size: 12px;
}
@media screen and (max-width: 760px) {
    .scmc-hub-dept-head {
        align-items: flex-start;
        padding: 12px;
    }
    .scmc-hub-dept-icon {
        width: 62px;
        min-width: 62px;
        height: 62px;
    }
    .scmc-hub-dept-icon img {
        max-width: 62px;
        max-height: 62px;
    }
    .scmc-hub-dept-title {
        font-size: 22px;
    }
    .scmc-hub-role-grid {
        padding: 10px;
    }
    .scmc-hub-role-card {
        grid-template-rows: 126px auto;
        min-width: 145px;
        flex-basis: 150px !important;
    }
    .scmc-hub-role-image {
        min-height: 126px;
    }
    .scmc-hub-role-image img {
        max-width: 126px;
        max-height: 126px;
    }
    .scmc-guide-pack-wide {
        margin: 0 10px 10px;
    }
}
@media screen and (max-width: 460px) {
    .scmc-hub-role-card {
        min-width: 100%;
        flex-basis: 100% !important;
    }
}
.scmc-hub,
.scmc-hub-dept,
.scmc-hub-role-grid {
    overflow: visible !important;
}
.scmc-hub-dept:hover {
    z-index: 9999;
}
.scmc-hub-role-grid {
    position: relative;
    z-index: 5;
}
.scmc-hub-role-card:hover {
    z-index: 1000000;
}
.scmc-hub-role-card[data-desc]:hover::after,
.scmc-hub-role-card[data-desc]:hover::before {
    z-index: 2147483647 !important;
}
.scmc-hub-role-image img,
.scmc-hub-role-image .mw-file-element {
    width: auto !important;
    height: 150px !important;
    max-width: 100% !important;
    max-height: 150px !important;
    object-fit: contain !important;
    image-rendering: pixelated;
}
/* =========================================================
  НАВИГАЦИЯ ПО РАЗДЕЛАМ ГАЙДОВ
  ========================================================= */
.scmc-guide-nav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 0 18px !important;
    padding: 9px !important;
    border: 1px solid rgba(120, 140, 155, .16);
    border-radius: 12px;
    background:
        radial-gradient(
            circle at 12% 0%,
            rgba(128, 178, 210, .07),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            rgba(128, 178, 210, .035),
            transparent 58%
        ),
        rgba(8, 11, 16, .48);
    box-shadow:
        inset 0 0 18px rgba(0, 0, 0, .16),
        0 8px 22px rgba(0, 0, 0, .10);
    box-sizing: border-box !important;
}
/*
* MediaWiki может вставлять между div-элементами
* пустые абзацы и переносы. В Grid они превращаются
* в лишние невидимые ячейки и раздвигают ряды.
*/
.scmc-guide-nav > p,
.scmc-guide-nav > br {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Элемент навигации */
.scmc-guide-nav-item {
    --guide-nav-accent: #8fc7ef;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
/* Ссылка-кнопка */
.scmc-guide-nav-item a,
.scmc-guide-nav-item a:visited {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px;
    padding: 7px 12px;
    border: 1px solid color-mix(
        in srgb,
        var(--guide-nav-accent) 36%,
        rgba(120, 140, 155, .17)
    );
    border-radius: 9px;
    background:
        linear-gradient(
            100deg,
            color-mix(
                in srgb,
                var(--guide-nav-accent) 16%,
                transparent
            ),
            transparent 72%
        ),
        rgba(17, 22, 28, .72);
    color: #dce5ed !important;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    box-shadow:
        inset 0 0 10px color-mix(
            in srgb,
            var(--guide-nav-accent) 7%,
            transparent
        );
    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease,
        color .16s ease;
    box-sizing: border-box !important;
}
/* Цветная точка */
.scmc-guide-nav-item a::before {
    content: "";
    width: 6px;
    height: 6px;
    min-width: 6px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--guide-nav-accent);
    box-shadow:
        0 0 7px color-mix(
            in srgb,
            var(--guide-nav-accent) 72%,
            transparent
        );
}
/* Наведение */
.scmc-guide-nav-item a:hover {
    transform: translateY(-2px);
    border-color: color-mix(
        in srgb,
        var(--guide-nav-accent) 66%,
        rgba(128, 178, 210, .48)
    );
    background:
        linear-gradient(
            100deg,
            color-mix(
                in srgb,
                var(--guide-nav-accent) 25%,
                transparent
            ),
            transparent 76%
        ),
        rgba(27, 34, 43, .94);
    color: #f2f4f7 !important;
    box-shadow:
        inset 0 0 12px color-mix(
            in srgb,
            var(--guide-nav-accent) 11%,
            transparent
        ),
        0 4px 12px color-mix(
            in srgb,
            var(--guide-nav-accent) 15%,
            transparent
        );
    text-decoration: none !important;
}
/* Цвета разделов */
.scmc-guide-nav-start {
    --guide-nav-accent: #aab9c6;
}
.scmc-guide-nav-engineer {
    --guide-nav-accent: #e6c65a;
}
.scmc-guide-nav-support {
    --guide-nav-accent: #e28b5b;
}
.scmc-guide-nav-medical {
    --guide-nav-accent: #69b9df;
}
.scmc-guide-nav-roles {
    --guide-nav-accent: #b99ae8;
}
.scmc-guide-nav-civilian {
    --guide-nav-accent: #82c99a;
}
/* Планшеты */
@media screen and (max-width: 900px) {
    .scmc-guide-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
/* Телефоны */
@media screen and (max-width: 520px) {
    .scmc-guide-nav {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 6px !important;
        padding: 7px !important;
    }
    .scmc-guide-nav-item a,
    .scmc-guide-nav-item a:visited {
        min-height: 36px;
        padding: 7px 10px;
        font-size: 12px;
    }
}
/* =========================================================
  СЕТКА ГАЙДОВ
  ========================================================= */
.scmc-guide-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
/* MediaWiki иногда добавляет между блоками пустые абзацы и переносы. */
.scmc-guide-grid > p,
.scmc-guide-grid > br {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* =========================================================
  РАСКЛАДКА КНОПОК
  ========================================================= */
/*
* Сетка сама определяет количество карточек.
* Основа — 6 колонок:
* 1 карточка  = 6/6;
* 2 карточки = 3/6 + 3/6;
* 3 карточки = 2/6 + 2/6 + 2/6;
* 4 карточки = два ряда по 2;
* 5 карточек = 3 в первом ряду и 2 во втором;
* 6 карточек = два ряда по 3.
*/
.scmc-guide-item {
    grid-column: span 2;
    min-width: 0;
    margin: 0;
    padding: 0;
}
/* Одна карточка */
.scmc-guide-item:only-of-type {
    grid-column: 1 / -1;
}
/* Две или четыре карточки */
.scmc-guide-item:first-of-type:nth-last-of-type(2),
.scmc-guide-item:first-of-type:nth-last-of-type(2) ~ .scmc-guide-item,
.scmc-guide-item:first-of-type:nth-last-of-type(4),
.scmc-guide-item:first-of-type:nth-last-of-type(4) ~ .scmc-guide-item {
    grid-column: span 3;
}
/* При пяти карточках последние две делят второй ряд пополам */
.scmc-guide-item:first-of-type:nth-last-of-type(5)
    ~ .scmc-guide-item:nth-of-type(n + 4) {
    grid-column: span 3;
}
/* =========================================================
  ССЫЛКИ
  ========================================================= */
.scmc-guide-item,
.scmc-guide-item > p,
.scmc-guide-item a,
.scmc-guide-button {
    min-width: 0;
}
.scmc-guide-item > p {
    display: contents !important;
    margin: 0 !important;
}
.scmc-guide-item a,
.scmc-guide-item a:visited {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    color: inherit !important;
    text-decoration: none !important;
}
/* =========================================================
  КНОПКА ГАЙДА
  ========================================================= */
.scmc-guide-button {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 150px;
    padding: 14px;
    border: 1px solid rgba(120, 140, 155, .22);
    border-radius: 8px;
    background: rgba(12, 16, 21, .78);
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}
.scmc-guide-button:hover {
    transform: translateY(-3px);
    background: rgba(18, 24, 31, .92);
    text-decoration: none !important;
}
/* =========================================================
  ТЕКСТ КНОПКИ
  ========================================================= */
.scmc-guide-title {
    display: block;
    margin-bottom: 10px;
    color: #dce3ea;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
}
.scmc-guide-desc {
    display: block;
    color: #c7ced8;
    font-size: 15px;
    line-height: 1.55;
}
.scmc-guide-button:hover .scmc-guide-desc {
    color: #e1e7ee;
}
/* =========================================================
  БЫСТРЫЙ СТАРТ
  ========================================================= */
.scmc-guides-start .scmc-guide-title {
    color: #dce3ea;
}
.scmc-guides-start .scmc-guide-button:hover {
    border-color: rgba(170, 185, 198, .48);
    box-shadow: 0 0 14px rgba(170, 185, 198, .16);
}
/* =========================================================
  ИНЖЕНЕРИЯ И СТРОИТЕЛЬСТВО
  ========================================================= */
.scmc-guides-engineer .scmc-card-head {
    background: linear-gradient(
        90deg,
        rgba(66, 56, 26, .92),
        rgba(34, 29, 18, .78)
    );
}
.scmc-guides-engineer .scmc-guide-title {
    color: #e6c65a;
}
.scmc-guides-engineer .scmc-guide-button:hover {
    border-color: rgba(230, 198, 90, .52);
    box-shadow: 0 0 14px rgba(230, 198, 90, .18);
}
/* =========================================================
  БОЕВАЯ ПОДДЕРЖКА И СНАБЖЕНИЕ
  ========================================================= */
.scmc-guides-support .scmc-card-head {
    background: linear-gradient(
        90deg,
        rgba(68, 38, 28, .92),
        rgba(32, 24, 21, .78)
    );
}
.scmc-guides-support .scmc-guide-title {
    color: #e28b5b;
}
.scmc-guides-support .scmc-guide-button:hover {
    border-color: rgba(226, 139, 91, .52);
    box-shadow: 0 0 14px rgba(226, 139, 91, .18);
}
/* =========================================================
  МЕДИЦИНА И ХИМИЯ
  ========================================================= */
.scmc-guides-medical .scmc-card-head {
    background: linear-gradient(
        90deg,
        rgba(28, 50, 68, .92),
        rgba(19, 29, 38, .78)
    );
}
.scmc-guides-medical .scmc-guide-title {
    color: #69b9df;
}
.scmc-guides-medical .scmc-guide-button:hover {
    border-color: rgba(105, 185, 223, .52);
    box-shadow: 0 0 14px rgba(105, 185, 223, .18);
}
/* =========================================================
  РОЛИ И СПЕЦИАЛИЗАЦИИ
  ========================================================= */
.scmc-guides-roles .scmc-card-head {
    background: linear-gradient(
        90deg,
        rgba(53, 40, 71, .92),
        rgba(28, 23, 39, .78)
    );
}
.scmc-guides-roles .scmc-guide-title {
    color: #b99ae8;
}
.scmc-guides-roles .scmc-guide-button:hover {
    border-color: rgba(185, 154, 232, .52);
    box-shadow: 0 0 14px rgba(185, 154, 232, .18);
}
/* =========================================================
  БЫТ И ДОСУГ
  ========================================================= */
.scmc-guides-civilian .scmc-card-head {
    background: linear-gradient(
        90deg,
        rgba(35, 63, 47, .92),
        rgba(21, 36, 29, .78)
    );
}
.scmc-guides-civilian .scmc-guide-title {
    color: #82c99a;
}
.scmc-guides-civilian .scmc-guide-button:hover {
    border-color: rgba(130, 201, 154, .52);
    box-shadow: 0 0 14px rgba(130, 201, 154, .18);
}
/* =========================================================
  МОБИЛЬНАЯ ВЕРСИЯ
  ========================================================= */
@media screen and (max-width: 600px) {
    .scmc-guide-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .scmc-guide-item,
    .scmc-guide-item:only-of-type,
    .scmc-guide-item:first-of-type:nth-last-of-type(2),
    .scmc-guide-item:first-of-type:nth-last-of-type(2) ~ .scmc-guide-item,
    .scmc-guide-item:first-of-type:nth-last-of-type(4),
    .scmc-guide-item:first-of-type:nth-last-of-type(4) ~ .scmc-guide-item,
    .scmc-guide-item:first-of-type:nth-last-of-type(5)
        ~ .scmc-guide-item:nth-of-type(n + 4) {
        grid-column: 1 / -1;
    }
    .scmc-guide-button {
        min-height: 0;
    }
}
/* ============================================================
  Автоматы с снаряжением — версия 2
  Этот блок заменяет старый блок с классами .cm-...
  ============================================================ */
/* Страница занимает всю ширину, но механику Tabber не ломаем */
.cm-equipment-page {
width: 100%;
max-width: 100%;
min-width: 0;
}
/* Каждая панель шкафа растягивается на всю вкладку. */
.cm-equipment-page table.cm-equipment-table {
display: table !important;
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
table-layout: fixed;
}
.cm-equipment-page .cm-equipment-table > tbody > tr > th,
.cm-equipment-page .cm-equipment-table > tbody > tr > td {
width: 100% !important;
min-width: 0 !important;
overflow: visible !important;
}
.cm-cabinet-image {
width: 100%;
text-align: center;
}
.cm-cabinet-image img {
max-width: 256px;
height: auto !important;
}
/* Заголовок раздела. */
.cm-equip-section-title {
width: 100%;
margin: 22px 0 8px;
text-align: center;
font-size: 24px;
font-weight: 700;
line-height: 1.2;
}
/*
* Список имеет постоянную удобную ширину и стоит по центру.
* Каждая строка сама является сеткой: иконка + текст.
* Никаких max-content/display:contents — именно они ломали таблицы.
*/
.cm-equip-list {
display: block;
width: 680px;
max-width: calc(100% - 24px);
margin: 0 auto 12px;
padding: 0 0 0 24px;
text-align: left;
}
.cm-equip-row {
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
column-gap: 8px;
align-items: center;
width: 100%;
min-height: 46px;
margin: 0;
padding: 1px 0;
}
.cm-equip-icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 44px;
min-width: 56px;
overflow: visible;
/* Скрывает подпись, которую старые шаблоны Предмет: выводят сами. */
font-size: 0;
line-height: 0;
}
/* Только главный спрайт строки. */
.cm-equip-icon > img,
.cm-equip-icon > a > img,
.cm-equip-icon > .cm-tooltip > img,
.cm-equip-icon > .cm-tooltip > a > img {
width: 44px !important;
height: 44px !important;
max-width: 44px !important;
max-height: 44px !important;
margin: 0 !important;
object-fit: contain;
vertical-align: middle;
image-rendering: pixelated;
}
.cm-equip-name {
display: block;
min-width: 0;
font-size: 16px;
font-weight: 600;
line-height: 1.25;
text-align: left;
white-space: nowrap;
word-break: normal;
overflow-wrap: normal;
}
.cm-equip-count {
display: inline;
margin-right: 5px;
color: #ffd700;
font-size: 16px;
font-weight: 700;
white-space: nowrap;
}
/* ============================================================
  КМ — ровные всплывающие подсказки v4
  ============================================================ */
.cm-tooltip {
position: relative;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 44px;
height: 44px;
margin: 0;
padding: 0;
cursor: help;
outline: none;
}
.cm-tooltip > img,
.cm-tooltip > a > img {
display: block;
width: 44px !important;
height: 44px !important;
max-width: 44px !important;
max-height: 44px !important;
margin: 0 !important;
object-fit: contain;
image-rendering: pixelated;
}
.cm-tooltip-popup {
position: absolute;
z-index: 10000;
top: 50%;
left: calc(100% + 10px);
display: block;
box-sizing: border-box;
width: 480px;
max-width: min(480px, 76vw);
max-height: 74vh;
margin: 0;
padding: 12px;
overflow-x: hidden;
overflow-y: auto;
visibility: hidden;
opacity: 0;
pointer-events: none;
transform: translateY(-50%) translateX(4px);
border: 1px solid rgba(156, 174, 199, 0.32);
border-radius: 9px;
background: #20242c;
box-shadow:
0 14px 38px rgba(0, 0, 0, 0.58),
inset 0 1px 0 rgba(255, 255, 255, 0.035);
color: #eef2f7;
font-size: 14px;
font-weight: 400;
line-height: 18px;
text-align: left;
white-space: normal;
word-break: normal;
overflow-wrap: break-word;
transition:
opacity 0.12s ease,
transform 0.12s ease,
visibility 0.12s;
}
/* Невидимый мост между спрайтом и окном */
.cm-tooltip-popup::before {
position: absolute;
top: 0;
right: 100%;
width: 12px;
height: 100%;
content: "";
}
.cm-tooltip:hover .cm-tooltip-popup,
.cm-tooltip:focus .cm-tooltip-popup,
.cm-tooltip:focus-within .cm-tooltip-popup {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: translateY(-50%) translateX(0);
}
.cm-tooltip-title {
display: block;
box-sizing: border-box;
margin: 0 0 8px;
padding: 2px 4px 9px 11px;
border-bottom: 1px solid rgba(255, 255, 255, 0.11);
border-left: 3px solid #6f9fe8;
font-size: 16px;
font-weight: 700;
line-height: 20px;
text-align: left;
}
/* Все строки идут одной вертикальной сеткой */
.cm-tooltip-tree {
display: flex;
flex-direction: column;
gap: 2px;
box-sizing: border-box;
width: 100%;
margin: 0;
padding: 0;
font-size: 14px;
line-height: 18px;
text-align: left;
}
/* Убирает неожиданные абзацы MediaWiki */
.cm-tooltip-tree p {
display: contents;
margin: 0 !important;
padding: 0 !important;
}
.cm-tooltip-tree br {
display: none !important;
}
/* Строго три постоянные колонки:
  спрайт | количество | название */
.cm-tooltip-entry {
position: relative;
display: grid !important;
grid-template-columns: 32px 38px minmax(0, 1fr);
column-gap: 8px;
align-items: center;
box-sizing: border-box;
width: 100%;
min-width: 0;
min-height: 38px;
margin: 0 !important;
padding: 3px 6px !important;
border-radius: 6px;
background: transparent;
font-size: 14px;
font-weight: 400;
line-height: 18px;
white-space: normal;
}
.cm-tooltip-entry:hover {
background: rgba(255, 255, 255, 0.045);
}
.cm-tooltip-entry > div {
box-sizing: border-box;
margin: 0 !important;
padding: 0 !important;
}
.cm-tooltip-entry-icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
min-width: 32px;
}
.cm-tooltip-entry-icon img,
.cm-tooltip-entry-icon a img {
display: block;
width: 28px !important;
height: 28px !important;
max-width: 28px !important;
max-height: 28px !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain;
vertical-align: middle;
image-rendering: pixelated;
}
.cm-tooltip-entry-count {
display: flex;
align-items: center;
width: 38px;
min-width: 38px;
min-height: 32px;
color: #ffd84a;
font-weight: 700;
line-height: 18px;
white-space: nowrap;
}
.cm-tooltip-entry-name {
display: flex;
align-items: center;
min-width: 0;
min-height: 32px;
color: #eef2f7;
font-weight: 400;
line-height: 18px;
text-align: left;
}
/* Вложенный предмет остаётся той же сеткой,
  но вся строка сдвигается вправо */
.cm-tooltip-entry--child {
padding-left: 36px !important;
background: rgba(111, 159, 232, 0.035);
}
/* Аккуратная ветка дерева */
.cm-tooltip-entry--child::before {
position: absolute;
top: -3px;
left: 17px;
width: 12px;
height: 22px;
content: "";
border-left: 1px solid rgba(145, 165, 195, 0.55);
border-bottom: 1px solid rgba(145, 165, 195, 0.55);
border-radius: 0 0 0 5px;
}
/* Полоса прокрутки */
.cm-tooltip-popup {
scrollbar-width: thin;
scrollbar-color: rgba(155, 169, 190, 0.48) transparent;
}
.cm-tooltip-popup::-webkit-scrollbar {
width: 8px;
}
.cm-tooltip-popup::-webkit-scrollbar-track {
background: transparent;
}
.cm-tooltip-popup::-webkit-scrollbar-thumb {
border: 2px solid transparent;
border-radius: 8px;
background: rgba(155, 169, 190, 0.48);
background-clip: padding-box;
}
/* Мобильная версия */
@media (max-width: 720px) {
.cm-tooltip-popup {
top: calc(100% + 8px);
left: 0;
width: min(480px, 90vw);
max-width: 90vw;
max-height: 68vh;
transform: translateY(4px);
}
.cm-tooltip:hover .cm-tooltip-popup,
.cm-tooltip:focus .cm-tooltip-popup,
.cm-tooltip:focus-within .cm-tooltip-popup {
transform: translateY(0);
}
.cm-tooltip-entry {
grid-template-columns: 30px 36px minmax(0, 1fr);
column-gap: 6px;
min-height: 38px;
padding-right: 4px !important;
padding-left: 4px !important;
}
.cm-tooltip-entry-icon {
width: 30px;
height: 30px;
min-width: 30px;
}
.cm-tooltip-entry-icon img,
.cm-tooltip-entry-icon a img {
width: 26px !important;
height: 26px !important;
max-width: 26px !important;
max-height: 26px !important;
}
.cm-tooltip-entry-count {
width: 36px;
min-width: 36px;
}
.cm-tooltip-entry--child {
padding-left: 28px !important;
}
.cm-tooltip-entry--child::before {
left: 12px;
width: 10px;
}
}
/* ============================================================
  Исправление вложенных строк КМ-подсказки
  ============================================================ */
.cm-tooltip-tree .cm-tooltip-entry {
display: grid !important;
grid-template-columns: 0 32px 38px minmax(0, 1fr) !important;
column-gap: 8px !important;
align-items: center !important;
box-sizing: border-box !important;
width: 100% !important;
min-height: 38px !important;
margin: 0 !important;
padding: 3px 6px !important;
}
.cm-tooltip-tree .cm-tooltip-entry-level-2 {
grid-template-columns: 22px 32px 38px minmax(0, 1fr) !important;
margin: 0 !important;
padding: 3px 6px !important;
background: rgba(111, 159, 232, 0.035);
}
/* Убираем старую абсолютную ветку */
.cm-tooltip-entry--child::before {
display: none !important;
}
/* Колонка дерева */
.cm-tooltip-entry-branch {
display: block !important;
position: relative;
box-sizing: border-box;
width: 100%;
height: 32px;
margin: 0 !important;
padding: 0 !important;
}
/* У обычной строки ветка невидимая и занимает 0 px */
.cm-tooltip-entry-level-1 .cm-tooltip-entry-branch {
display: none !important;
}
/* Аккуратный уголок у вложенного предмета */
.cm-tooltip-entry-level-2 .cm-tooltip-entry-branch::before {
position: absolute;
top: -6px;
right: 2px;
width: 12px;
height: 23px;
content: "";
border-left: 1px solid rgba(145, 165, 195, 0.58);
border-bottom: 1px solid rgba(145, 165, 195, 0.58);
border-radius: 0 0 0 5px;
}
.cm-tooltip-tree .cm-tooltip-entry-icon {
display: flex !important;
grid-column: 2;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box;
width: 32px !important;
height: 32px !important;
margin: 0 !important;
padding: 0 !important;
}
.cm-tooltip-tree .cm-tooltip-entry-count {
display: flex !important;
grid-column: 3;
align-items: center !important;
box-sizing: border-box;
width: 38px !important;
min-width: 38px !important;
min-height: 32px !important;
margin: 0 !important;
padding: 0 !important;
color: #ffd84a;
font-weight: 700;
line-height: 18px !important;
white-space: nowrap;
}
.cm-tooltip-tree .cm-tooltip-entry-name {
display: flex !important;
grid-column: 4;
align-items: center !important;
box-sizing: border-box;
min-width: 0 !important;
min-height: 32px !important;
margin: 0 !important;
padding: 0 !important;
line-height: 18px !important;
text-align: left;
}
/* В обычной строке нулевая первая колонка */
.cm-tooltip-tree .cm-tooltip-entry-level-1 .cm-tooltip-entry-icon {
grid-column: 2;
}
.cm-tooltip-tree .cm-tooltip-entry-level-1 .cm-tooltip-entry-count {
grid-column: 3;
}
.cm-tooltip-tree .cm-tooltip-entry-level-1 .cm-tooltip-entry-name {
grid-column: 4;
}
/* Фиксированное одинаковое расстояние */
.cm-tooltip-tree {
gap: 2px !important;
}
.cm-tooltip-tree .cm-tooltip-entry + .cm-tooltip-entry {
margin-top: 0 !important;
}
@media (max-width: 720px) {
.cm-tooltip-tree .cm-tooltip-entry {
grid-template-columns: 0 30px 36px minmax(0, 1fr) !important;
column-gap: 6px !important;
}
.cm-tooltip-tree .cm-tooltip-entry-level-2 {
grid-template-columns: 18px 30px 36px minmax(0, 1fr) !important;
}
.cm-tooltip-tree .cm-tooltip-entry-icon {
width: 30px !important;
height: 30px !important;
}
.cm-tooltip-tree .cm-tooltip-entry-count {
width: 36px !important;
min-width: 36px !important;
}
.cm-tooltip-entry-level-2 .cm-tooltip-entry-branch::before {
right: 1px;
width: 10px;
}
}
/* ============================================================
  Нормальный маркер вложенных предметов
  ============================================================ */
/* Убираем старую кривую ветку */
.cm-tooltip-entry-level-2 .cm-tooltip-entry-branch::before,
.cm-tooltip-entry--child::before {
display: none !important;
}
/* Вложенная строка */
.cm-tooltip-tree .cm-tooltip-entry-level-2 {
grid-template-columns: 18px 32px 38px minmax(0, 1fr) !important;
column-gap: 8px !important;
width: calc(100% - 18px) !important;
margin-left: 18px !important;
padding: 3px 6px !important;
border-left: 2px solid rgba(111, 159, 232, 0.55);
border-radius: 5px;
background: rgba(111, 159, 232, 0.045);
}
/* Маркер вложенности */
.cm-tooltip-entry-level-2 .cm-tooltip-entry-branch {
position: relative;
display: flex !important;
align-items: center;
justify-content: center;
width: 18px;
height: 32px;
margin: 0 !important;
padding: 0 !important;
}
/* Аккуратная стрелочка вместо линии */
.cm-tooltip-entry-level-2 .cm-tooltip-entry-branch::after {
display: block;
content: "›";
color: #83aef0;
font-size: 20px;
font-weight: 700;
line-height: 1;
transform: translateY(-1px);
}
/* Возвращаем правильные колонки */
.cm-tooltip-entry-level-2 .cm-tooltip-entry-icon {
grid-column: 2 !important;
}
.cm-tooltip-entry-level-2 .cm-tooltip-entry-count {
grid-column: 3 !important;
}
.cm-tooltip-entry-level-2 .cm-tooltip-entry-name {
grid-column: 4 !important;
}
@media (max-width: 720px) {
.cm-tooltip-tree .cm-tooltip-entry-level-2 {
grid-template-columns: 16px 30px 36px minmax(0, 1fr) !important;
column-gap: 6px !important;
width: calc(100% - 12px) !important;
margin-left: 12px !important;
}
.cm-tooltip-entry-level-2 .cm-tooltip-entry-branch {
width: 16px;
height: 30px;
}
.cm-tooltip-entry-level-2 .cm-tooltip-entry-branch::after {
font-size: 18px;
}
}
/* === Снаряжение охотника ========================================= */
/* v6: автоматическая подгонка обычных спрайтов и отдельный масштаб брони. */
.scmc-hunter-equipment {
--hunter-bg: #0f1211;
--hunter-surface: #151917;
--hunter-surface-alt: #181d1a;
--hunter-surface-hover: #1b201d;
--hunter-line: #303632;
--hunter-line-soft: #272c29;
--hunter-bronze: #9a875e;
--hunter-bronze-muted: #61583f;
--hunter-bone: #d8d0bd;
--hunter-text: #d3d8d3;
--hunter-muted: #969e98;
--hunter-cold: #9aadaa;
--hunter-good: #a5b28f;
--hunter-bad: #c09383;
max-width: 1320px;
margin: 0 auto;
color: var(--hunter-text);
font-size: 15px;
line-height: 1.5;
}
.scmc-hunter-equipment *,
.scmc-hunter-equipment *::before,
.scmc-hunter-equipment *::after {
box-sizing: border-box;
}
/* Заголовки */
.scmc-hunter-equipment h2 {
margin: 0 0 1rem;
padding: 0 0 0.72rem;
border: 0;
border-bottom: 1px solid var(--hunter-line);
color: var(--hunter-bone);
font-size: 1.55rem;
font-weight: 650;
letter-spacing: 0.02em;
}
.scmc-hunter-equipment h3 {
position: relative;
margin: 2rem 0 0.72rem;
padding: 0.42rem 0 0.42rem 15px;
border: 0;
border-bottom: 1px solid var(--hunter-line-soft);
color: #e0e3de;
font-size: 1.08rem;
font-weight: 650;
letter-spacing: 0.015em;
}
.scmc-hunter-equipment h3::before {
position: absolute;
top: 0.58rem;
bottom: 0.58rem;
left: 0;
width: 3px;
background: var(--hunter-bronze);
content: "";
}
.scmc-hunter-equipment .mw-editsection {
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0;
}
/* Базовая таблица */
.scmc-hunter-equipment .scmc-hunter-table {
width: 100%;
margin: 0 0 2rem;
overflow: hidden;
border: 1px solid var(--hunter-line) !important;
border-radius: 5px;
border-collapse: separate !important;
border-spacing: 0;
table-layout: fixed;
background: var(--hunter-bg) !important;
color: var(--hunter-text);
}
.scmc-hunter-equipment .scmc-hunter-table thead th,
.scmc-hunter-equipment .scmc-hunter-table .scmc-hunter-table-head th {
padding: 9px 10px !important;
border: 0 !important;
border-right: 1px solid #393d35 !important;
border-bottom: 1px solid var(--hunter-bronze-muted) !important;
background: #20231e !important;
color: #c9c0a9 !important;
font-size: 0.71rem;
font-weight: 700;
line-height: 1.25;
letter-spacing: 0.05em;
text-align: left;
text-transform: uppercase;
}
.scmc-hunter-equipment .scmc-hunter-table thead th:last-child,
.scmc-hunter-equipment .scmc-hunter-table .scmc-hunter-table-head th:last-child {
border-right: 0 !important;
}
.scmc-hunter-equipment .scmc-hunter-table th.scmc-hunter-col-stat,
.scmc-hunter-equipment .scmc-hunter-table th.scmc-hunter-col-speed,
.scmc-hunter-equipment .scmc-hunter-table th.scmc-hunter-col-damage,
.scmc-hunter-equipment .scmc-hunter-table th.scmc-hunter-col-type {
text-align: center;
}
.scmc-hunter-equipment .scmc-hunter-table tbody td {
padding: 11px 10px !important;
vertical-align: top;
border: 0 !important;
border-right: 1px solid var(--hunter-line-soft) !important;
border-bottom: 1px solid var(--hunter-line-soft) !important;
background: var(--hunter-surface) !important;
color: var(--hunter-text);
line-height: 1.43;
transition: background-color 120ms ease;
}
.scmc-hunter-equipment .scmc-hunter-table tbody tr:nth-child(even) td {
background: var(--hunter-surface-alt) !important;
}
.scmc-hunter-equipment .scmc-hunter-table tbody tr:hover td {
background: var(--hunter-surface-hover) !important;
}
.scmc-hunter-equipment .scmc-hunter-table tbody td:last-child {
border-right: 0 !important;
}
.scmc-hunter-equipment .scmc-hunter-table tbody tr:last-child td {
border-bottom: 0 !important;
}
/* Колонки широкого режима */
.scmc-hunter-equipment .scmc-hunter-table-armor .scmc-hunter-col-item { width: 25%; }
.scmc-hunter-equipment .scmc-hunter-table-armor .scmc-hunter-col-stat { width: 7%; }
.scmc-hunter-equipment .scmc-hunter-table-armor .scmc-hunter-col-speed { width: 13%; }
.scmc-hunter-equipment .scmc-hunter-table-armor .scmc-hunter-col-desc { width: 41%; }
.scmc-hunter-equipment .scmc-hunter-table-weapon .scmc-hunter-col-item { width: 22%; }
.scmc-hunter-equipment .scmc-hunter-table-weapon .scmc-hunter-col-damage { width: 9%; }
.scmc-hunter-equipment .scmc-hunter-table-weapon .scmc-hunter-col-type { width: 10%; }
.scmc-hunter-equipment .scmc-hunter-table-weapon .scmc-hunter-col-notes { width: 27%; }
.scmc-hunter-equipment .scmc-hunter-table-weapon .scmc-hunter-col-desc { width: 32%; }
.scmc-hunter-equipment .scmc-hunter-table-utility .scmc-hunter-col-item { width: 22%; }
.scmc-hunter-equipment .scmc-hunter-table-utility .scmc-hunter-col-type { width: 13%; }
.scmc-hunter-equipment .scmc-hunter-table-utility .scmc-hunter-col-effect { width: 32%; }
.scmc-hunter-equipment .scmc-hunter-table-utility .scmc-hunter-col-desc { width: 33%; }
/* Предмет */
.scmc-hunter-equipment .scmc-hunter-item {
display: flex;
align-items: flex-start;
gap: 10px;
min-width: 0;
}
.scmc-hunter-equipment .scmc-hunter-icon {
display: grid;
flex: 0 0 64px;
width: 64px;
height: 64px;
overflow: hidden;
place-items: center;
border: 1px solid #303632;
border-radius: 3px;
background: #0d100f;
}
.scmc-hunter-equipment .scmc-hunter-icon > span,
.scmc-hunter-equipment .scmc-hunter-icon > a {
display: grid;
width: 100%;
height: 100%;
place-items: center;
line-height: 0;
}
.scmc-hunter-equipment .scmc-hunter-icon img,
.scmc-hunter-equipment .scmc-hunter-icon .mw-file-element {
display: block;
width: 92% !important;
height: 92% !important;
max-width: none !important;
max-height: none !important;
object-fit: contain;
object-position: center;
margin: auto !important;
transform: none;
transform-origin: center;
image-rendering: pixelated;
}
/* Броня визуально массивнее оружия, поэтому ей нужен меньший масштаб. */
.scmc-hunter-equipment .scmc-hunter-table-armor .scmc-hunter-icon img,
.scmc-hunter-equipment .scmc-hunter-table-armor .scmc-hunter-icon .mw-file-element {
width: 65px !important;
height: 65px !important;
object-position: center center;
}
.scmc-hunter-equipment .scmc-hunter-item-body {
min-width: 0;
padding-top: 1px;
}
.scmc-hunter-equipment .scmc-hunter-name {
margin-bottom: 6px;
color: #e3e6e1;
font-size: 0.96rem;
font-weight: 650;
line-height: 1.25;
overflow-wrap: anywhere;
}
.scmc-hunter-equipment .scmc-hunter-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.scmc-hunter-equipment .scmc-hunter-tag {
display: inline-flex;
align-items: center;
min-height: 19px;
padding: 1px 6px;
border: 1px solid #3c433e;
border-radius: 2px;
background: #1a1f1c;
color: #adb5ae;
font-size: 0.67rem;
font-weight: 650;
line-height: 1.2;
}
.scmc-hunter-equipment .scmc-hunter-tag-accent {
border-color: #5f573f;
background: #24231d;
color: #c6b992;
}
.scmc-hunter-equipment .scmc-hunter-tag-danger {
border-color: #604941;
background: #241d1b;
color: #c39789;
}
/* Значения — текст, а не кнопки внутри ячеек */
.scmc-hunter-equipment td[data-label="Удары"],
.scmc-hunter-equipment td[data-label="Баллистика"],
.scmc-hunter-equipment td[data-label="Взрыв"],
.scmc-hunter-equipment td[data-label="Урон"],
.scmc-hunter-equipment td[data-label="Тип урона"],
.scmc-hunter-equipment td[data-label="Скорость"],
.scmc-hunter-equipment td[data-label="Категория"] {
text-align: center;
}
.scmc-hunter-equipment .scmc-hunter-score {
display: inline;
padding: 0;
border: 0;
background: transparent;
color: var(--hunter-bone);
font-size: 0.92rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1.35;
white-space: nowrap;
}
.scmc-hunter-equipment .scmc-hunter-status,
.scmc-hunter-equipment .scmc-hunter-damage-type {
display: inline;
padding: 0;
border: 0;
background: transparent;
font-size: 0.78rem;
font-weight: 650;
line-height: 1.35;
}
.scmc-hunter-equipment .scmc-hunter-status-good { color: var(--hunter-good); }
.scmc-hunter-equipment .scmc-hunter-status-bad { color: var(--hunter-bad); }
.scmc-hunter-equipment .scmc-hunter-status-neutral,
.scmc-hunter-equipment .scmc-hunter-damage-type { color: var(--hunter-cold); }
.scmc-hunter-equipment .scmc-hunter-dash {
color: #747c76;
font-weight: 700;
}
.scmc-hunter-equipment .scmc-hunter-description {
color: #c8cdc8;
}
.scmc-hunter-equipment .scmc-hunter-notes,
.scmc-hunter-equipment .scmc-hunter-effect {
color: #b9c0ba;
font-size: 0.91rem;
}
.scmc-hunter-equipment .scmc-hunter-empty {
padding: 20px !important;
border: 1px dashed #454c47 !important;
background: var(--hunter-surface) !important;
color: var(--hunter-muted) !important;
text-align: center;
}
/*
Средняя ширина: таблица превращается в горизонтальные карточки.
Это основной режим для Citizen с открытой боковой панелью.
*/
@media screen and (max-width: 1180px) {
.scmc-hunter-equipment .scmc-hunter-table {
display: block;
overflow: visible;
border: 0 !important;
border-radius: 0;
background: transparent !important;
}
.scmc-hunter-equipment .scmc-hunter-table thead,
.scmc-hunter-equipment .scmc-hunter-table .scmc-hunter-table-head {
display: none;
}
.scmc-hunter-equipment .scmc-hunter-table tbody {
display: grid;
gap: 10px;
width: 100%;
}
.scmc-hunter-equipment .scmc-hunter-table tbody tr {
display: grid;
overflow: hidden;
border: 1px solid var(--hunter-line);
border-left: 3px solid var(--hunter-bronze-muted);
border-radius: 5px;
background: var(--hunter-surface);
}
.scmc-hunter-equipment .scmc-hunter-table tbody td,
.scmc-hunter-equipment .scmc-hunter-table tbody tr:nth-child(even) td,
.scmc-hunter-equipment .scmc-hunter-table tbody tr:hover td {
display: block;
width: auto !important;
min-width: 0;
padding: 10px 11px !important;
border: 0 !important;
background: var(--hunter-surface) !important;
text-align: left;
}
.scmc-hunter-equipment .scmc-hunter-table tbody td:first-child {
padding: 12px !important;
border-right: 1px solid var(--hunter-line-soft) !important;
background: var(--hunter-surface-alt) !important;
}
.scmc-hunter-equipment .scmc-hunter-table tbody td:not(:first-child)::before {
display: block;
margin-bottom: 4px;
color: #858d87;
content: attr(data-label);
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.045em;
line-height: 1.2;
text-transform: uppercase;
}
.scmc-hunter-equipment .scmc-hunter-table .scmc-hunter-description {
padding-top: 9px !important;
border-top: 1px solid var(--hunter-line-soft) !important;
}
.scmc-hunter-equipment .scmc-hunter-table-armor tbody tr {
grid-template-columns: minmax(210px, 1fr) repeat(3, 74px) minmax(125px, 0.7fr);
}
.scmc-hunter-equipment .scmc-hunter-table-armor tbody td:nth-child(1) {
grid-column: 1;
grid-row: 1 / 3;
}
.scmc-hunter-equipment .scmc-hunter-table-armor tbody td:nth-child(6) {
grid-column: 2 / 6;
grid-row: 2;
}
.scmc-hunter-equipment .scmc-hunter-table-weapon tbody tr {
grid-template-columns: minmax(210px, 0.9fr) 88px 105px minmax(220px, 1.35fr);
}
.scmc-hunter-equipment .scmc-hunter-table-weapon tbody td:nth-child(1) {
grid-column: 1;
grid-row: 1 / 3;
}
.scmc-hunter-equipment .scmc-hunter-table-weapon tbody td:nth-child(5) {
grid-column: 2 / 5;
grid-row: 2;
}
.scmc-hunter-equipment .scmc-hunter-table-utility tbody tr {
grid-template-columns: minmax(210px, 0.9fr) 145px minmax(260px, 1.5fr);
}
.scmc-hunter-equipment .scmc-hunter-table-utility tbody td:nth-child(1) {
grid-column: 1;
grid-row: 1 / 3;
}
.scmc-hunter-equipment .scmc-hunter-table-utility tbody td:nth-child(4) {
grid-column: 2 / 4;
grid-row: 2;
}
.scmc-hunter-equipment .scmc-hunter-empty::before {
display: none !important;
}
}
/* Телефон */
@media screen and (max-width: 720px) {
.scmc-hunter-equipment {
font-size: 14px;
}
.scmc-hunter-equipment h3 {
margin-top: 1.6rem;
}
.scmc-hunter-equipment .scmc-hunter-table tbody tr {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.scmc-hunter-equipment .scmc-hunter-table tbody td:first-child,
.scmc-hunter-equipment .scmc-hunter-table-armor tbody td:nth-child(1),
.scmc-hunter-equipment .scmc-hunter-table-weapon tbody td:nth-child(1),
.scmc-hunter-equipment .scmc-hunter-table-utility tbody td:nth-child(1) {
grid-column: 1 / -1;
grid-row: auto;
}
.scmc-hunter-equipment .scmc-hunter-table tbody td:first-child {
border-right: 0 !important;
border-bottom: 1px solid var(--hunter-line-soft) !important;
}
.scmc-hunter-equipment .scmc-hunter-table-armor tbody td:nth-child(2),
.scmc-hunter-equipment .scmc-hunter-table-armor tbody td:nth-child(3),
.scmc-hunter-equipment .scmc-hunter-table-armor tbody td:nth-child(4),
.scmc-hunter-equipment .scmc-hunter-table-armor tbody td:nth-child(5) {
grid-column: auto;
grid-row: auto;
border-bottom: 1px solid var(--hunter-line-soft) !important;
}
.scmc-hunter-equipment .scmc-hunter-table-armor tbody td:nth-child(6),
.scmc-hunter-equipment .scmc-hunter-table-weapon tbody td:nth-child(4),
.scmc-hunter-equipment .scmc-hunter-table-weapon tbody td:nth-child(5),
.scmc-hunter-equipment .scmc-hunter-table-utility tbody td:nth-child(2),
.scmc-hunter-equipment .scmc-hunter-table-utility tbody td:nth-child(3),
.scmc-hunter-equipment .scmc-hunter-table-utility tbody td:nth-child(4) {
grid-column: 1 / -1;
grid-row: auto;
}
.scmc-hunter-equipment .scmc-hunter-table-weapon tbody td:nth-child(2) {
border-right: 1px solid var(--hunter-line-soft) !important;
}
.scmc-hunter-equipment .scmc-hunter-table-weapon tbody td:nth-child(2),
.scmc-hunter-equipment .scmc-hunter-table-weapon tbody td:nth-child(3),
.scmc-hunter-equipment .scmc-hunter-table-utility tbody td:nth-child(2) {
border-bottom: 1px solid var(--hunter-line-soft) !important;
}
.scmc-hunter-equipment .scmc-hunter-table .scmc-hunter-notes,
.scmc-hunter-equipment .scmc-hunter-table .scmc-hunter-effect,
.scmc-hunter-equipment .scmc-hunter-table .scmc-hunter-description {
border-top: 1px solid var(--hunter-line-soft) !important;
}
}
@media screen and (max-width: 430px) {
.scmc-hunter-equipment .scmc-hunter-table-armor tbody tr {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.scmc-hunter-equipment .scmc-hunter-icon {
flex-basis: 58px;
width: 58px;
height: 58px;
}
.scmc-hunter-equipment .scmc-hunter-icon img,
.scmc-hunter-equipment .scmc-hunter-icon .mw-file-element {
width: 92% !important;
height: 92% !important;
max-width: none !important;
max-height: none !important;
object-fit: contain;
object-position: center;
transform: none;
}
.scmc-hunter-equipment .scmc-hunter-table-armor .scmc-hunter-icon img,
.scmc-hunter-equipment .scmc-hunter-table-armor .scmc-hunter-icon .mw-file-element {
width: 58px !important;
height: 58px !important;
}
}
/* =========================================================
  ARMAT AUTHORIZATION TERMINAL
  ========================================================= */
.armat-auth {
    box-sizing: border-box;
    width: min(92vw, 560px);
    margin: 8vh auto 5vh;
    padding: 46px 48px 38px;
    background:
        linear-gradient(
            rgba(8, 14, 12, 0.96),
            rgba(5, 10, 8, 0.98)
        );
    border: 1px solid rgba(151, 178, 159, 0.26);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.8),
        0 18px 60px rgba(0, 0, 0, 0.45),
        inset 0 0 50px rgba(64, 100, 75, 0.05);
    color: #aebbb1;
    font-family:
        "IBM Plex Mono",
        "Roboto Mono",
        "Courier New",
        monospace;
    text-align: left;
    position: relative;
    overflow: hidden;
}
/* Тонкие scanlines */
.armat-auth::after {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.012) 0px,
            rgba(255,255,255,0.012) 1px,
            transparent 1px,
            transparent 4px
        );
    opacity: .6;
}
/* Верхняя декоративная метка */
.armat-auth::before {
    content: "ARMAT // RESTRICTED";
    position: absolute;
    top: 13px;
    right: 17px;
    color: rgba(168, 183, 172, .25);
    font-size: 8px;
    letter-spacing: 2px;
}
/* =========================================================
  LOGO
  ========================================================= */
.armat-auth__logo {
    text-align: center;
    margin: 8px 0 29px;
}
.armat-auth__logo img {
    max-width: 260px;
    height: auto;
    opacity: .92;
    filter:
        grayscale(100%)
        contrast(1.15)
        brightness(1.1);
}
/* =========================================================
  SYSTEM TITLE
  ========================================================= */
.armat-auth__system {
    text-align: center;
    color: #d0d8d2;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-bottom: 7px;
}
.armat-auth__node {
    text-align: center;
    font-size: 9px;
    color: #667269;
    letter-spacing: 2px;
}
/* =========================================================
  DIVIDER
  ========================================================= */
.armat-auth__line {
    height: 1px;
    margin: 27px 0 17px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(160, 181, 165, .45),
            transparent
        );
}
/* =========================================================
  STATUS
  ========================================================= */
.armat-auth__status {
    margin-bottom: 28px;
    color: #718079;
    font-size: 9px;
    letter-spacing: 1.8px;
}
.armat-auth__status-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 8px;
    vertical-align: 1px;
    background: #849b89;
    border-radius: 50%;
    box-shadow:
        0 0 6px rgba(132, 155, 137, .7);
}
/* =========================================================
  FORM
  ========================================================= */
.armat-auth__motto {
    margin: 7px 0 14px;
    text-align: center;
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 12px;
    font-weight: normal;
    font-style: italic;
    letter-spacing: 1.1px;
    color: rgba(177, 188, 180, .62);
    text-shadow:
        0 1px 0 rgba(0, 0, 0, .7);
    opacity: .9;
}
.armat-auth__label {
    margin:
        0
        0
        7px
        3px;
    color: #616d65;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 2.4px;
}
.armat-auth__field {
    min-height: 47px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    margin-bottom: 21px;
    padding: 0 15px;
    border:
        1px
        solid
        rgba(148, 169, 153, .28);
    background:
        rgba(255, 255, 255, .018);
    color: #bac5bc;
    font-size: 12px;
    letter-spacing: .7px;
    box-shadow:
        inset 3px 0
        rgba(139, 160, 144, .22);
}
.armat-auth__field:hover {
    border-color:
        rgba(163, 185, 168, .42);
    background:
        rgba(255, 255, 255, .027);
}
.armat-auth__prompt {
    margin-right: 11px;
    color: #6f8374;
    font-weight: bold;
}
.armat-auth__password {
    letter-spacing: 3px;
}
/* =========================================================
  SESSION DATA
  ========================================================= */
.armat-auth__meta {
    margin:
        5px
        3px
        29px;
    color: #4e5a52;
    font-size: 8px;
    line-height: 1.9;
    letter-spacing: 1.5px;
}
/* =========================================================
  ENTER BUTTON
  ========================================================= */
.armat-auth__enter {
    text-align: center;
    margin-top: 9px;
}
/* Убираем стандартное оформление внешней ссылки MediaWiki */
.armat-auth__enter a.external {
    display: inline-flex;
    width: 55px;
    height: 55px;
    justify-content: center;
    align-items: center;
    border:
        1px
        solid
        rgba(170, 191, 175, .38);
    background:
        rgba(255,255,255,.015);
    color: #b3c0b6 !important;
    text-decoration: none !important;
    font-size: 25px;
    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease,
        box-shadow .15s ease;
}
/* убирает иконку внешней ссылки MediaWiki */
.armat-auth__enter a.external::after {
    display: none !important;
}
.armat-auth__enter a.external:hover {
    color: #e0e6e1 !important;
    border-color:
        rgba(190, 210, 195, .7);
    background:
        rgba(160, 180, 165, .08);
    box-shadow:
        0 0 18px
        rgba(115, 145, 122, .12);
    transform:
        translateX(2px);
}
.armat-auth__enter-icon {
    position: relative;
    top: -1px;
}
/* =========================================================
  ENTER LABEL
  ========================================================= */
.armat-auth__enter-label {
    margin-top: 10px;
    text-align: center;
    color: #566158;
    font-size: 8px;
    letter-spacing: 3px;
}
/* =========================================================
  FOOTER
  ========================================================= */
.armat-auth__footer {
    margin-top: 34px;
    padding-top: 15px;
    border-top:
        1px solid
        rgba(140, 160, 145, .12);
    color: #3f4942;
    text-align: center;
    font-size: 7px;
    line-height: 1.8;
    letter-spacing: 1.7px;
}
/* =========================================================
  MOBILE
  ========================================================= */
@media (max-width: 600px) {
    .armat-auth {
        width: 94vw;
        margin-top: 3vh;
        padding:
            38px
            24px
            30px;
    }
    .armat-auth__system {
        font-size: 11px;
        letter-spacing: 3px;
    }
    .armat-auth__field {
        font-size: 10px;
    }
}
/* СМ:Главаная - конец */