/*
  ____   ____    _     ____  _____    ____
 / ___| |  _ \  / \   / ___|| ____|  | ___|
 \___ \ | |_) |/ _ \ | |    |  _|    |___ \
  ___) ||  __// ___ \| |___ | |___    ___) |
 |____/ |_|  /_/   \_\\____||_____|  |____/

 space 5 ♦ CSS
 [Astrum Template]

*/

/*   (1) Base settings ------- ------- ------- ------- ------- */

/*   :: import ---   */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto&display=swap');

:root {
    /* Fonts 2 */
    --wf: 'Montserrat', sans-serif;
    --wf2: 'Roboto', sans-serif;

    /* Transitus START */
    
/* Theme colors */
--color-primary: #112259;
--color-primary-light: #273970;
--color-primary-dark: #09184b;
--color-secondary: #b47358;
--color-secondary-light: #d6ab81;
--color-secondary-dark: #965337;
--color-accent: #ccf357;
--color-accent-light: #d7ff60;
--color-accent-dark: #beeb39;
--color-dark: #131314;
--color-white: #ffffff;
--color-bg: #f7f9fa;

/* Content */
--color-text: var(--color-dark);
--color-text-grey: #737373;
--color-text-light-grey: #a2a2a2;
--color-text-accent: var(--color-accent);
--color-text-heading: var(--color-primary-dark);
--color-link: var(--color-primary);
--color-link-hover: var(--color-text);
--color-link-active: var(--color-text);
--color-icon-grey: var(--color-text-grey);
--color-icon-active: var(--color-text);
--thover: rgba(0, 0, 0, 0.10);
--trans: all 0.2s;

/* Font sizes */
--size-text: 1rem;
--size-text-note: 0.8rem;
--size-heading-xl: 1.8rem;
--size-heading-l: 1.64rem;
--size-heading-m: 1.48rem;
--size-heading-s: 1.32rem;
--size-heading-xs: 1.2rem;

/* Support colors */
--color-orange: #ffb946;
--color-red: #f7685b;
--color-green: #2ed47a;
--color-blue: #104ae0;
--color-purple: #885af8;

/* UI Sizes */
--ui-size: 36px;
--ui-size-s: 24px;
--ui-size-l: 44px;
--ui-radius: 8px;

/* UI Colors */
--ui-bg-100: #f5f5f5;
--ui-bg-200: #ebebeb;
--ui-bg-300: #e1e1e1;
--ui-input-bg: #ffffff;
--ui-input-bg-active: #dee7ff;
--ui-input-bg-disabled: #eff2f6;
--ui-color-primary: #112259;
--ui-color-primary-active: var(--color-primary);
--ui-color-primary-hover: #273970;
--ui-color-text: var(--color-dark);
--ui-color-text-hover: var(--ui-color-primary-hover);
--ui-color-text-active: var(--ui-color-primary);
--ui-color-text-disabled: #bababa;
--ui-color-text-grey: #737373;
--ui-color-text-light-grey: #9b9b9b;
--ui-color-placeholder: var(--ui-color-text-grey);
--ui-color-border: #b5bfd9;
--ui-color-border-active: #0043ed;
--ui-color-border-hover: #909dc1;

/* Buttons */
--color-btn: var(--ui-color-primary);
--color-btn-hover: var(--ui-color-primary-hover);
--color-btn-text: var(--color-white);
--color-btn-text-hover: var(--color-white);
--color-btn-sec: #dbe5ff;
--color-btn-sec-hover: #ebf1ff;
--color-btn-sec-text: var(--color-primary);
--color-btn-sec-text-hover: var(--color-primary);

/* UI Borders */
--ui-input-border: 1px solid var(--ui-color-border);
--ui-input-border-active: 1px solid var(--ui-color-border-active);
--ui-input-border-hover: 1px solid var(--ui-color-border-hover);


    /*Transitus END */

    /* UI Shadows */
    --ui-shadow-focus: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 2px #b5c9fc;
    --ui-shadow-error: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 2px #fcb5b5;

    /*UI Transitions */
    --ui-trans: 0.16s ease;

    /* Box-Shadows */
    --sp-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --sp-shadow-s: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --sp-shadow-m: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --sp-shadow-l: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --sp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --sp-shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);


    /* Objects */
    --gf: 8px; /* grid flow */
    --gap: 16px; /* grid gap */
    --gap2: 32px; /* double grid gap */
    --header-height: 48px;
    --wid: 1280px; /* max-width of content */
    --content-width: 600px; /* max-width of text content */


    /* SP5 DEV */
    --sp5-1: #05e745;
    --sp5-2: #222e4e;

}

/*   :: VARS ---   */

/*   :: Base tags ---   */
*, ::after, ::before {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    color: var(--color-text);
    font-family: var(--wf), Helvetica, Arial, sans-serif;
    font-size: var(--size-text);
    background: var(--color-bg);
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
}

a,
a:link,
a:visited,
a:active {
    color: var(--color-link);
    text-decoration: none;
    transition: var(--trans);
}

a:hover {
    color: var(--color-link-hover);
}


/*   (2) SP5 Tokens ------- ------- ------- ------- ------- */

.wid {
    width: 100%;
    max-width: var(--wid);
    min-width: 748px;
    margin: 0 auto;
}

.wa {
    width: auto;
}

.fw {
    width: 100%;
}


.wf {
    font-family: var(--wf);
}

.wf2 {
    font-family: var(--wf2);
}

.cimg, .tac {
    text-align: center;
}

.tal {
    text-align: left;
}

.tar {
    text-align: right;
}


.fb {
    font-weight: bold;
}

.fi {
    font-style: italic;
}

.fsn {
    font-size: var(--size-text-note);
}

.ca {
    color: var(--color-accent);
}

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

.cg {
    color: var(--color-text-grey);
}

.clg {
    color: var(--color-text-light-grey);
}

.nwp {
    white-space: nowrap;
}

.hide-on-mobile, .hom {
    display: block;
}

.show-on-mobile, .som {
    display: none;
}

.dn {
    display: none !important;
}

.clicked-item {
    cursor: pointer;
    transition: var(--trans);
    text-decoration: none;
}

.clicked-item:hover {
    transition: var(--trans);
    text-decoration: underline;
}


.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: auto;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

@media screen and (max-width: 768px) {
    :ROOT {
        --wid: 100%;
    }

    .wid {
        max-width: 100%;
        min-width: 100%;
    }

    .hide-on-mobile, .hom {
        display: none;
    }

    .show-on-mobile, .som {
        display: block;
    }
}

/*   (3) SP5 Service classes ------- ------- ------- ------- ------- */

/*   :: Pads ---   */
.pad-1 {
    width: 100%;
    height: 1px;
}

.pad-4 {
    width: 100%;
    height: 4px;
}

.pad-x1 {
    width: 100%;
    height: var(--gf);
}

.pad-x2 {
    width: 100%;
    height: calc(var(--gf) * 2);
}

.pad-x3 {
    width: 100%;
    height: calc(var(--gf) * 3);
}

.pad-x4 {
    width: 100%;
    height: calc(var(--gf) * 4);
}

.pad-x5 {
    width: 100%;
    height: calc(var(--gf) * 5);
}

.pad-x6 {
    width: 100%;
    height: calc(var(--gf) * 6);
}

.pad-x8 {
    width: 100%;
    height: calc(var(--gf) * 8);
}

/*   :: SP5 icons ---   */
[class*='spis-'] {
    stroke: var(--color-icon-grey);
    fill: none;
    flex-shrink: 0;
}

[class*='spis-']:hover {
    stroke: var(--color-icon-active);
}

.spis {
    stroke: var(--color-icon-grey);
    fill: none;
}

.spis-16 {
    width: 16px;
    height: 16px;
}

.spis-24 {
    width: 24px;
    height: 24px;
}

.spis-32 {
    width: 32px;
    height: 32px;
}

[class*='spif-'] {
    fill: var(--color-icon-grey);
    stroke: none;
    flex-shrink: 0;
}

[class*='spif-']:hover {
    fill: var(--color-icon-active);
}

.spif {
    fill: var(--color-icon-grey);
    stroke: none;
}


.spif-16 {
    width: 16px;
    height: 16px;
}

.spif-24 {
    width: 24px;
    height: 24px;
}

.spif-32 {
    width: 32px;
    height: 32px;
}

.itext {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

[class*='itext-'] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

[class*='itext-'] img {
    flex-shrink: 0;
}

[class*='itext-'] svg {
    flex-shrink: 0;
}

/* 16 */
.itext-16 img {
    width: 16px;
    flex-shrink: 0;
}

.itext-16 svg {
    width: 16px;
    height: 16px;
}

/* 24 */
.itext-24 img {
    width: 24px;
}

.itext-24 svg {
    width: 24px;
    height: 24px;
}

/* 32 */
.itext-32 img {
    width: 32px;
}

.itext-32 svg {
    width: 32px;
    height: 32px;
}

/* 40 */
.itext-40 img {
    width: 40px;
}

.itext-40 svg {
    width: 40px;
    height: 40px;
}

/* 48 */
.itext-48 img {
    width: 48px;
}

.itext-48 svg {
    width: 48px;
    height: 48px;
}

/* itext pan */
.itext-pan {
    display: flex;
    padding: var(--gap) 0;
    margin: var(--gf) 0;
}

.itext-pan [class*='itext-'] {
    margin-right: var(--gap);
}

/*   :: Made in space5 ---   */
.madeinsp5 {
    display: inline-block;
    background: transparent url("../img/sp5-logo.svg") no-repeat;
    background-size: contain;
    width: 56px;
    height: 33px;
    filter: grayscale(100%);
    transition: var(--trans);
}

.madeinsp5:hover {
    filter: none;
}

/*   :: Video responsive ---   */
.video-responsive {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* /Video responsive */

/*   (4) SP5 Grid ------- ------- ------- ------- ------- */
.grid-wr {
    display: grid;
    grid-template-columns: 1fr minmax(320px, var(--wid)) 1fr;
}

.grid-a {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
    grid-gap: var(--gap);
}

.grid-line {
    grid-column: 1/-1;
}

.grid-a240 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    grid-gap: var(--gap);
}

[class*='grid-c-'] {
    display: grid;
    grid-gap: var(--gap);
}

.grid-c-2 {
    grid-template-columns: 1fr 1fr;
}

.grid-c-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.grid-c-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid-c-5 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.grid-c-6 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-c-7 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-c-8 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-c-9 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-c-10 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-c-11 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-c-12 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-demo {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 768px) {
    [class*='grid-c-'] {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

/*   (5) SP5 Buttons ------- ------- ------- ------- ------- */
.btn, a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gf);
    padding: 0 24px;
    border-radius: var(--ui-radius);
    border: 1px solid transparent;
    cursor: pointer;
    color: var(--color-btn-text);
    background: var(--color-btn);
    transition: var(--ui-trans);
    font-size: var(--size-text);
    line-height: 1;
    font-family: inherit;

    height: var(--ui-size);
}

.btn:hover {
    transition: var(--ui-trans);
    background: var(--color-btn-hover);
    color: var(--color-btn-text-hover);
}

.btn--sec, a.btn--sec {
    background: var(--color-btn-sec);
    color: var(--color-btn-sec-text);
}

.btn--sec:hover {
    background: var(--color-btn-sec-hover);
    color: var(--color-btn-sec-text-hover);
}

/* btn icon */
.btn svg {
    fill: none;
    stroke: currentColor;
    width: 16px;
    height: 16px;
}

.btn svg.spif {
    fill: currentColor;
    stroke: none;
}

.btn:hover svg.spif {
    fill: currentColor;
    stroke: none;
}

.btn svg.spis {
    stroke: currentColor;
    fill: none;
}

.btn:hover svg.spis {
    stroke: currentColor;
    fill: none;
}

.btn img {
    width: 16px;
    height: 16px;
}


/* btn sizes --- */
.btn--s, a.btn--s, .btn.ui-s, a.btn.ui-s {
    height: var(--ui-size-s);
    padding: 0 16px;
    font-size: 0.8rem;
}

.ui-s svg, .btn--s svg {
    width: 16px;
    height: 16px;
}

.btn--l, a.btn--l, .btn.ui-l, a.btn.ui-l {
    height: var(--ui-size-l);
    padding: 0 32px;
}

.btn--l svg, .btn.ui-l svg {
    width: 16px;
    height: 16px;
}

/* btn outline */
.btn--outline, a.btn--outline {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--ui-color-border);
}

.btn--outline svg {
    stroke: var(--color-text);
}

.btn--outline:hover {
    color: var(--color-text);
    background: var(--color-btn-sec-hover);
    border-color: var(--ui-color-border-hover);
}

.btn--outline:hover svg {
    stroke: currentColor;
}

/* /btn outline */

/* btn ghost */
.btn--ghost, a.btn--ghost {
    background: transparent;
    color: var(--color-text);
    border: 1px solid transparent;
}

.btn--ghost svg {
    stroke: var(--color-text);
}

.btn--ghost:hover {
    background: var(--thover);
    color: var(--color-text);
    border-color: transparent;
}

.btn--ghost:hover svg {
    stroke: currentColor;
}

/* /btn ghost */

/* btn ui */
.btn--ui, a.btn--ui {
    border: none;
    background: none;
    padding: 0;
    width: var(--ui-size);
    height: var(--ui-size);
    color: var(--color-icon-grey);
    font-size: var(--size-text-note);
}

.btn--s.btn--ui, .ui-s.btn--ui, a.ui-s.btn--ui {
    padding: 0;
    width: var(--ui-size-s);
    height: var(--ui-size-s);
}

.btn--l.btn--ui, .ui-l.btn--ui, a.ui-l.btn--ui {
    padding: 0;
    width: var(--ui-size-l);
    height: var(--ui-size-l);
}

.btn--ui svg {
    stroke: currentColor;
    margin: 0;
}

.btn--ui:hover {
    background: var(--thover);
    color: var(--color-text);
}

/* /btn ui*/

/* btn micro */
.btn--micro, a.btn--micro {
    padding: 0;
    font-size: var(--size-text-note);
    background: transparent;
    border: none;
    color: var(--color-icon-grey);
    height: auto;
}

.btn--micro svg {
    width: calc(var(--gf) * 2);
    height: calc(var(--gf) * 2);
    stroke: var(--color-icon-grey);
}

.btn--micro:hover {
    color: var(--color-text);
    background: none;
}

.btn--micro:hover svg {
    stroke: var(--color-text);
}

/* /btn micro */

/* btn disabled */
a.btn--disabled, .btn--disabled, .btn:disabled, a.btn:disabled {
    color: var(--ui-color-text-disabled);
    background: var(--ui-input-bg-disabled);
    box-shadow: none;
    cursor: default;
    user-select: none;
}

a.btn--disabled:hover, .btn--disabled:hover, .btn:disabled:hover, a.btn:disabled:hover {
    color: var(--ui-color-text-disabled);
    background: var(--ui-input-bg-disabled);
    cursor: default;
    box-shadow: none;
    user-select: none;
}

a.btn--disabled svg, .btn--disabled svg, .btn:disabled svg, a.btn:disabled svg {
    stroke: var(--ui-color-text-disabled);
}

/* btn pan */
.btn-pan {
    display: flex;
    padding: calc(var(--gf) * 2) 0;
    margin: var(--gf) 0;
    gap: var(--gap);
}

.btn-pan--thin {
    padding: 0;
    margin: 0;
}

.btn-pan--center {
    justify-content: center;
}

.btn-pan--right {
    justify-content: flex-end;
}

.btn-pan--col {
    flex-flow: column;
}


/* /btn pan */

/*   (6) SP5 Forms ------- ------- ------- ------- ------- */
input {
    accent-color: var(--ui-color-primary);
}

.sf {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.sf__footer {
    margin-top: var(--gf);
}

.sf__form {
}

.sf__fieldset {
    margin: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--gf);
    border-radius: calc(var(--ui-radius) * 2);
}

.sf__fieldset:not(:last-child) {
    margin-bottom: calc(var(--gap) * 1.5);
}

.sf__legend {
    font-size: var(--size-heading-xs);
    color: var(--color-primary);
    padding: var(--gf);
}

.sf__line {
    margin: 0 0 var(--gap) 0;
}

.sf .sf__line {
    margin: 0 0 var(--gf) 0;
}

.sf .sf__line:last-child {
    margin-bottom: 0;
}

.sf__label {
    display: flex;
    align-items: center;
    gap: calc(var(--gf) / 2);
    color: var(--ui-color-text);
}

.sf__label--col {
    flex-direction: column;
    align-items: flex-start;
}

.sf__label + .sf__input {
    margin-top: calc(var(--gf) / 2);
}

.sf__label + .sf__select {
    margin-top: calc(var(--gf) / 2);
}

.sf__label + .sf__textarea {
    margin-top: calc(var(--gf) / 2);
}

.sf__label:has(input:disabled) {
    color: var(--ui-color-text-disabled);
}

.sf__checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: var(--gf);
    cursor: pointer;
}

.sf__input, .sf__textarea, .sf__select {
    border: var(--ui-input-border);
    background: var(--ui-input-bg);
    color: var(--ui-color-text);
    font-size: 14px;
    border-radius: var(--ui-radius);
    width: 200px;
}

.sf__input.fw, .sf__textarea.fw, .sf__select.fw {
    width: 100%;
    max-width: 100%;
}

.sf__input--a, .sf__textarea--a, .sf__select--a {
    width: auto;
    max-width: 200px;
}

.sf__input {
    padding: 0 12px;
    height: var(--ui-size);
}

.sf__select {
    padding: 0 12px;
    height: var(--ui-size);

    /*todo appearance with arrows   */
    /*
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;*/
}

.sf__input:hover {
    border: var(--ui-input-border-hover);
}

.sf__textarea:hover {
    border: var(--ui-input-border-hover);
}

.sf__select:hover {
    border: var(--ui-input-border-hover);
}

button:focus, .btn:focus, a.btn:focus, .sf__input:focus, .sf__textarea:focus, .sf__select:focus {
    outline: none;
}

button:focus-visible, .btn:focus-visible, a.btn:focus-visible, .sf__input:focus-visible, .sf__textarea:focus-visible, .sf__select:focus-visible {
    box-shadow: var(--ui-shadow-focus);
}

.sf__select option {
    padding: 8px;
}

.sf__input::placeholder {
    color: var(--ui-color-placeholder);
    font-family: inherit;
}

.sf__textarea {
    padding: 8px;
    width: 100%;
    min-height: 120px;
}

.sf__textarea::placeholder {
    color: var(--ui-color-placeholder);
    font-family: inherit;
}

.sf__input--m, .sf__select--m {
    width: 168px;
}

.sf__textarea--m {
    width: 75%;
}

.sf__input--s, .sf__select--s {
    width: 92px;
}

.sf__block-title {
    margin: 0 0 var(--gap) 0;
    font-size: 1rem;
    font-weight: 600;
}

.sf .sf__line + .sf__block-title {
    margin-top: var(--gap2);
}

.sf__line--with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.sf__line--with-icon .sf__input,
.sf__line--with-icon .sf__select {
    padding-right: 44px;
}

.sf__line--with-icon .sf__icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--color-text-grey);
}

.sf__line--with-icon .sf__icon--action {
    pointer-events: auto;
    cursor: pointer;
}

.sf__line--with-icon .sf__icon svg {
    fill: none;
    stroke: currentColor;
}

.sf__line--with-icon .sf__textarea + .sf__icon {
    top: 1.5rem;
    transform: none;
}


.sf__textarea--s {
    width: 50%;
}

.sf__input--a, .sf__select--a {
    width: fit-content;
}

.sf__input.ui-s, .sf__select.ui-s {
    height: var(--ui-size-s);
}

.sf__input.ui-l, .sf__select.ui-l {
    height: var(--ui-size-l);
}

.sf__select[multiple] {
    height: auto;
    overflow: hidden;
}

.sf__input[type="range"] {
    padding: 0;
}

.sf__input--error, .sf__textarea--error, .sf__select--error {
    box-shadow: var(--ui-shadow-error);
}

.sf__input--error::placeholder, .sf__textarea--error::placeholder, .sf__select--error::placeholder {
    color: var(--color-red);
}

/* SP Checkbox and Radio */

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    input[type=checkbox],
    input[type=radio] {
        --active-inner: var(--ui-input-bg);
        --focus: var(--color-primary);
        /*  --disabled: #F6F8FF;
          --disabled-inner: #E1E6F9;*/
        -webkit-appearance: none;
        -moz-appearance: none;
        height: 21px;
        outline: none;
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin: 0;
        cursor: pointer;
        border: 1px solid var(--bc, var(--ui-color-border));
        background: var(--b, var(--ui-input-bg));
        transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
        flex-shrink: 0;
    }

    input[type=checkbox]:after,
    input[type=radio]:after {
        content: "";
        display: block;
        left: 0;
        top: 0;
        position: absolute;
        transition: transform 0.3s var(--d-t-e, ease), opacity var(--d-o, 0.2s);
    }

    input[type=checkbox]:checked,
    input[type=radio]:checked {
        --b: var(--ui-color-primary);
        --bc: var(--ui-color-border-active);
        --d-o: .3s; /* delay opacity */
        --d-t: .6s; /* delay transform */
        --d-t-e: cubic-bezier(.2, .85, .32, 1.2); /* delay ease */
    }

    input[type=checkbox]:disabled,
    input[type=radio]:disabled {
        --b: var(--ui-input-bg-disabled);
        cursor: not-allowed;
        opacity: 0.9;
    }

    input[type=checkbox]:disabled:checked,
    input[type=radio]:disabled:checked {
        --b: var(--ui-input-bg-disabled);
        --bc: var(--ui-color-border);
    }

    input[type=checkbox]:disabled + label,
    input[type=radio]:disabled + label {
        cursor: not-allowed;
    }

    input[type=checkbox]:hover:not(:checked):not(:disabled),
    input[type=radio]:hover:not(:checked):not(:disabled) {
        --bc: var(--ui-color-border-hover);
    }

    input[type=checkbox]:focus,
    input[type=radio]:focus {
        box-shadow: 0 0 0 var(--focus);
    }

    input[type=checkbox]:not(.sp-switch),
    input[type=radio]:not(.sp-switch) {
        width: 21px;
    }

    input[type=checkbox]:not(.sp-switch):after,
    input[type=radio]:not(.sp-switch):after {
        opacity: var(--o, 0);
    }

    input[type=checkbox]:not(.sp-switch):checked,
    input[type=radio]:not(.sp-switch):checked {
        --o: 1;
    }

    input[type=checkbox] + label,
    input[type=radio] + label {
        font-size: 14px;
        line-height: 21px;
        display: inline-block;
        vertical-align: top;
        cursor: pointer;
        margin-left: 4px;
    }

    input[type=checkbox]:not(.sp-switch) {
        border-radius: 8px;
    }

    input[type=checkbox]:not(.sp-switch):after {
        width: 5px;
        height: 9px;
        border: 2px solid var(--active-inner);
        border-top: 0;
        border-left: 0;
        left: 7px;
        top: 4px;
        transform: rotate(var(--r, 20deg));
    }

    input[type=checkbox]:not(.sp-switch):checked {
        --r: 43deg;
    }

    input[type=checkbox].sp-switch {
        width: 38px;
        border-radius: 11px;
    }

    input[type=checkbox].sp-switch:after {
        left: 2px;
        top: 2px;
        border-radius: 50%;
        width: 15px;
        height: 15px;
        background: var(--ab, var(--ui-color-border));
        transform: translateX(var(--x, 0));
    }

    input[type=checkbox].sp-switch:checked {
        --ab: var(--active-inner);
        --x: 17px;
    }

    input[type=checkbox].sp-switch:disabled:not(:checked):after {
        opacity: 0.6;
    }

    input[type=checkbox]:disabled:not(.sp-switch):after {
        border-color: var(--ui-color-border);
    }

    input[type=radio] {
        border-radius: 50%;
    }

    input[type=radio]:after {
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background: var(--active-inner);
        opacity: 0;
        transform: scale(var(--s, 0.7));
    }

    input[type=radio]:checked {
        --s: .5;
    }

    input[type=radio]:disabled:after {
        background: var(--ui-color-border);
    }
}

/* /SP Checkbox and Radio */

/* radio-group */
.sp-radio-group {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 4px;
}

.sp-radio-group__item {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.sp-radio-group input[type=radio] {
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.sp-radio-group-item__text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gf);

    cursor: pointer;
    background-color: var(--color-white);
    padding: var(--gf) var(--gap);
    position: relative;
    margin-left: -1px;
    border: var(--ui-input-border);
    letter-spacing: .05em;
    color: var(--ui-color-text);
    text-align: center;
    transition: background-color .3s ease;
}

.sp-radio-group-item__text svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--ui-color-text);
}

.sp-radio-group input[type="radio"]:checked + .sp-radio-group-item__text {
    border: 1px solid var(--ui-color-border-active);
    background-color: var(--ui-input-bg-active);
    z-index: 1;
    color: var(--ui-color-text-active);
}

.sp-radio-group input[type="radio"]:checked + .sp-radio-group-item__text svg {
    stroke: currentColor;
}

.sp-radio-group__item:first-child .sp-radio-group-item__text {
    border-radius: var(--gf) 0 0 var(--gf);
}

.sp-radio-group__item:last-child .sp-radio-group-item__text {
    border-radius: 0 var(--gf) var(--gf) 0;

}

/* Disabled */
.sp-radio-group input[type=radio]:disabled + .sp-radio-group-item__text {
    background: var(--ui-input-bg-disabled);
    color: var(--ui-color-text-disabled);
    cursor: default;
    user-select: none;
}

/* /radio-group */

/* SP Radio Toggle */
.sp-radio-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 4px;
    border-radius: calc(var(--ui-size) / 2);
    background: var(--ui-input-bg-disabled);
    font-size: var(--size-text-note);
    transition: var(--ui-trans);
    color: var(--ui-color-text);
    width: fit-content;
    height: var(--ui-size);
}

.sp-radio-toggle .sp-radio-toggle__label {
    flex: 1 1 auto;
    text-align: center;
}

.sp-radio-toggle .sp-radio-toggle__label input {
    opacity: 0;
    position: absolute;
    width: 0;
}

.sp-radio-toggle .sp-radio-toggle__label .sp-radio-toggle__text {
    height: calc(var(--ui-size) - 8px);
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--gf);
    border-radius: var(--gap);
    padding: 0 var(--gf);
    transition: all .15s ease-in-out;
    color: var(--ui-color-text-disabled);
    cursor: pointer;
}

.sp-radio-toggle .sp-radio-toggle__label .sp-radio-toggle__text:hover {
    background: rgba(255, 255, 255, 0.6);
    color: var(--ui-color-text-hover);
}

.sp-radio-toggle .sp-radio-toggle__label input:checked + .sp-radio-toggle__text {
    background: var(--ui-color-primary);
    color: var(--color-white);
}

.sp-radio-toggle .sp-radio-toggle__label input:checked + .sp-radio-toggle__text:hover {
    background: var(--ui-color-primary-hover);
    color: var(--color-white);
}

/* /SP Radio Toggle */

/* SP Radio Box    */
.sp-radio-box-wrapper {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gf);

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.sp-radio-box__input:checked + .sp-radio-box-card {
    border-color: var(--ui-shadow-focus);
    color: var(--ui-color-border-active);
}

.sp-radio-box__input:checked + .sp-radio-box-card:before {
    transform: scale(1);
    opacity: 1;
    background-color: var(--ui-color-primary-active);
    border-color: var(--ui-color-border-active);
}


.sp-radio-box__input:checked + .sp-radio-box-card .sp-radio-box__text {
    color: var(--ui-color-text-active);
}

.sp-radio-box__input:focus + .sp-radio-box-card {
    border-color: var(--ui-color-border-active);
    box-shadow: var(--ui-shadow-focus);
}

.sp-radio-box__input:focus + .sp-radio-box-card:before {
    transform: scale(1);
    opacity: 1;
}

.sp-radio-box-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 80px;
    height: 80px;
    padding: 4px;
    border-radius: var(--gf);
    border: var(--ui-input-border);
    background-color: var(--color-white);
    transition: var(--ui-trans);
    cursor: pointer;
    position: relative;
}

.sp-radio-box-card:before {
    content: "";
    position: absolute;
    display: block;
    width: 0.75rem;
    height: 0.75rem;
    border: var(--ui-input-border);
    background-color: #fff;
    border-radius: 50%;
    top: 0.25rem;
    left: 0.25rem;
    opacity: 0;
    transform: scale(0);
    transition: var(--ui-trans);
}

.sp-radio-box-card:hover {
    border: var(--ui-input-border-hover);
}

.sp-radio-box-card:hover:before {
    transform: scale(1);
    opacity: 1;
}

.sp-radio-box-card__example {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.sp-radio-box-card__example img {
    width: 40px;
    height: 40px;
}

.sp-radio-box__text {
    color: var(--ui-color-text-grey);
    transition: 0.375s ease;
    text-align: center;
    font-size: 12px;
    line-height: 1;
}

input[type="radio"].sp-radio-box__input {
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    outline: 1px solid red;
}

/* /SP Radio Box    */

.sp-tab-sections-group {
}

.sp-tab-section {
    display: none;
}

.sp-tab-section--active {
    display: block;
}

/* SP Chips */
.sp-chips-pan {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gf);
}

.sp-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    padding: 4px 4px 4px var(--gap);
    border-radius: var(--gap);
    background: rgba(0, 0, 0, 0.05);
    font-size: var(--size-text-note);
    transition: var(--ui-trans);
    cursor: pointer;
    color: rgba(0, 0, 0, 0.6);
}

.sp-chip:hover {
    background: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.8);
}

.sp-chip svg {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    width: 20px;
    height: 20px;
    padding: 2px;
    fill: none;
    stroke: rgba(0, 0, 0, 0.42);
    flex-shrink: 0;
}

.sp-chip:hover svg {
    stroke: rgba(0, 0, 0, 0.6);
}

.sp-chip--disabled {
    outline: 1px solid rgba(0, 0, 0, 0.1);
    background: transparent;
    color: rgba(0, 0, 0, 0.3);
}

.sp-chip--disabled:hover {
    background: transparent;
    cursor: auto;
    color: rgba(0, 0, 0, 0.3);
}

.sp-chip--disabled svg {
    opacity: 0.2;
}

.sp-chip--disabled:hover svg {
    opacity: 0.2;
}

/* /SP Chips */

/* SP Toggle */
.sp-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 4px;
    border-radius: calc(var(--ui-size) / 2);
    background: var(--ui-bg-100);
    font-size: var(--size-text-note);
    transition: var(--ui-trans);
    cursor: pointer;
    color: var(--ui-color-text);
    width: fit-content;
    height: var(--ui-size);
}

.sp-toggle__item {
    height: calc(var(--ui-size) - 8px);
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--gf);
    border-radius: var(--gap);
    padding: 0 var(--gf);
    transition: var(--ui-trans);
    color: var(--ui-color-text-light-grey);
}

.sp-toggle__item:hover {
    background: rgba(255, 255, 255, 0.6);
    color: var(--ui-color-text-grey);
}

.sp-toggle__item--active, .sp-toggle__item--active:hover {
    background: var(--color-white);
    color: var(--ui-color-text);
}

/* /SP Toggle */


/*   (7) SP5 Typographic ------- ------- ------- ------- ------- */
h1, h2, h3, h4, h5 {
    font-family: var(--wf2);
    margin: 0;
    padding: 16px 0;
    font-weight: bold;
}

h1 {
    font-size: var(--size-heading-xl);
    padding: calc(var(--size-heading-xl) / 2) 0;
}

h2 {
    font-size: var(--size-heading-l);
    padding: calc(var(--size-heading-l) / 2) 0;
}

h3 {
    font-size: var(--size-heading-m);
    padding: calc(var(--size-heading-m) / 2) 0;
}

h4 {
    font-size: var(--size-heading-s);
    padding: calc(var(--size-heading-s) / 2) 0;
}

h5 {
    font-size: var(--size-heading-xs);
    padding: calc(var(--size-heading-xs) / 2) 0;
}

p {
    line-height: 1.2;
}

/*   (8) SP5 Components ------- ------- ------- ------- ------- */
/* Product card
------- ------- ------- */
.pcard {
    text-align: center;
    background: var(--color-white);
    color: var(--color-text);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    max-width: 300px;
}

.pcard:hover {
    transition: all 0.2s;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.pcard__body {
    position: relative;
}

.pcard__body, .pcard__footer {
    width: 100%;
    padding: var(--gap);
}

.pcard__footer {
    padding: 0 16px 16px 16px;
}

.pcard__img {
    width: 100%;
    height: 190px;
    object-fit: cover;
}

.pcard__title {
    font-family: var(--wf2);
    font-size: var(--size-heading-xs);
    font-weight: bold;
    padding: 6px 0;
}

.pcard__price {
    margin: 16px 0;
    text-align: center;
    font-size: var(--size-heading-s);
    color: var(--color-text);
    height: 46px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pcard__old-price {
    display: block;
    color: var(--color-text-grey);
    text-decoration: line-through;
    font-size: var(--size-text-note);
    text-align: center;
}

.pcard__notexist {
    text-align: center;
    font-size: var(--size-heading-s);
    color: var(--color-red);
}

.pcard__pad {
    padding: 8px 0;
    text-align: center;
}

a.pcard__btn {
    display: inline-flex;
    background: var(--color-primary);
    color: var(--color-white);
    cursor: pointer;
    padding: 6px 24px;
    border-radius: 4px;
    border: none;
    text-align: center;
    transition: var(--trans);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);
}

a.pcard__btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
    transition: var(--trans);
}

.pcard-icon {
    width: 24px;
    height: 20px;
    background-size: cover;
    margin: 0 4px;
}

.label-box {
    position: absolute;
    top: 24px;
    left: 0;
    display: flex;
    flex-direction: column;
}

.label {
    margin: 0 0 8px 0;
}

.label--new {
    background: var(--color-secondary);
    color: var(--color-text);
    box-sizing: border-box;
    padding: 4px 32px;
}

.label--hit {
    width: 33px;
    height: 16px;
    background-size: cover;
}

.label--discount {
    width: 93px;
    height: 16px;
    background-size: cover;
}

@media screen and (max-width: 768px) {
    .pcard {
        margin: 0 16px;
    }
}

/* /Product card */

/* Crumbs
------- ------- ------- */
.breadcrumb {
    font-size: var(--size-text-note);
    line-height: 120%;
    color: var(--color-text-grey);
    margin: 24px 0 16px 0;
    padding: 0;
    display: inline-flex;
    gap: var(--gf);
}

.breadcrumb a {
    color: var(--color-link);
}

.breadcrumb a:hover {
    color: var(--color-link-hover);
}

.breadcrumb li {
    list-style: none;
}

.breadcrumb li:after {
    content: '/';
    margin: 0 0 0 6px;
    color: var(--color-text-grey);
}

.breadcrumb li:last-child:after {
    content: '';
}

/* /Crumbs */

/* Pagination */
.pagination-nav {
    display: flex;
    justify-content: center;
}

.pagination {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--gf);
}

.pagination li {
    margin: 0 1px;
}

.pagination a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5em 1em;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: var(--ui-radius);
    text-decoration: none;
    color: var(--color-text);
    height: var(--ui-size-s);
    font-size: var(--size-text-note);

}

.pagination a:hover {
    border: 1px solid rgba(0, 0, 0, 0.4);
}

.pagination svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
}

.pagination a[aria-current="page"] {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* /Pagination */

/* Summary */
summary {
    cursor: pointer;
}

.sp-details {
    background: var(--color-white);
    border-radius: var(--ui-radius);
    transition: var(--ui-trans);
}

.sp-details:hover {
    box-shadow: var(--sp-shadow-l);
}

.sp-summary {
    cursor: pointer;
    list-style: none;
    background: var(--color-white);
    transition: var(--ui-trans);
    padding: var(--gap);
    border-radius: var(--ui-radius);
    border-bottom: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--gf);
}

.sp-summary::after {
    content: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 18L15 12L9 6" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    color: var(--color-text-grey);
    display: flex;
    align-items: start;
    justify-content: start;
    width: 24px;
    height: 24px;
}

.sp-summary:hover {
    background: var(--ui-bg-100);
}

.sp-details[open] .sp-summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.sp-details[open] .sp-summary::after {
    transform: rotate(90deg);
}

.sp-summary::-webkit-details-marker {
    display: none;
}

.sp-details__body {
    padding: var(--gap);
}

/* /Summary */

/*   (9) SP5 Basic Layout ------- ------- ------- ------- ------- */

/* for fixed footer */
.body {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

/* /for fixed footer */

/* Header
------- ------- ------- */
.header-wrapper {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background-color: var(--color-white);
    position: sticky;
    top: 0;
    z-index: 99;
}

@media screen and (max-width: 768px) {
    .header-wrapper {
        box-shadow: var(--sp-shadow-xs);
    }
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 16px;
    padding: var(--gf) var(--gap);
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.header-logo__img {
    height: 40px;
} 
.header-logo__img-text {
    height: 20px;
    margin-top: 8px;
}

.header-logo__text {
    font-size: 16px;
    line-height: 1;
    font-family: var(--wf2), sans-serif;
    font-weight: bold;
    color: var(--color-dark);
}

.header__right {
    /*width: 100%;*/
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
    gap: var(--gap);
}

.header-right__profile-link {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: var(--gap);
}

.header-user-name-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.header-user-name {
    font-size: var(--size-heading-xs);
    font-weight: bold;
    font-family: var(--wf2), sans-serif;
    line-height: normal;
    color: var(--color-primary-dark);
    display: none;
}

.header-right__burger-menu-btn {

}

.login-btn {
    color: var(--color-primary-light);
    font-weight: bold;
    line-height: normal;
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 4px;
}

.login-btn:hover {
    color: var(--color-primary-dark);
}

.login-btn:hover svg {
    stroke: var(--color-primary-dark);
    transition: var(--trans);
}


.login-btn svg {
    stroke: var(--color-primary-light);
    transition: var(--trans);
}

/* /Header */

/* MAIN NAV
------- ------- ------- */

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--gap2);
}

.nav-links__item {
    font-weight: bold;
    font-size: 1.2rem;
}

/* Выпадающее меню "О нас" */
.nav-links__item--dropdown {
    position: relative;
}

.nav-links__trigger {
    cursor: pointer;
    display: inline-block;
}

.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    padding: var(--gap);
    background: var(--ui-bg-0, #fff);
    border-radius: var(--ui-radius, 8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 100;
    margin-top: 4px;
}

.nav-links__item--dropdown:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
}

.nav-links__item--dropdown.active .nav-links__trigger {
    color: var(--color-primary);
}

.nav-dropdown__item {
    display: block;
    padding: var(--gf) var(--gap);
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text);
    text-decoration: none;
    border-radius: 4px;
}

.nav-dropdown__item:hover {
    background: var(--ui-bg-100, #f5f5f5);
    color: var(--color-primary);
}

/* Шаблон с боковым меню: aside */
.layout-with-aside {
    display: flex;
    gap: var(--gap2);
    align-items: flex-start;
    padding: var(--gap);
    max-width: var(--wid, 1200px);
    margin: 0 auto;
}

.aside {
    flex-shrink: 0;
    width: 220px;
    position: sticky;
    top: var(--gap2);
    background: var(--color-white);
    padding: var(--gf);
}

.aside__nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.aside__nav-item {
    margin: 0 0 2px 0;
}

.aside__nav-link {
    display: block;
    padding: var(--gf) var(--gap);
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--ui-radius, 6px);
}

.aside__nav-link:hover,
.aside__nav-link.active {
    background: var(--ui-bg-100, #f0f0f0);
    color: var(--color-primary);
}

.layout-with-aside__main {
    flex: 1;
    min-width: 0;
}

@media screen and (max-width: 768px) {
    .layout-with-aside {
        flex-direction: column;
        padding: var(--gap);
    }

    .layout-with-aside .aside {
        width: 100%;
        position: static;
    }
}

/* Единая структура страниц профиля */
.profile-page {

}

.profile-page__header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap2);
    margin: 0 0 var(--gap) 0;
}

.profile-page__title {
    display: flex;
    align-items: center;
    gap: var(--gap);
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.profile-page__title-icon {
    flex-shrink: 0;
    stroke: var(--color-primary);
}

.profile-page__action {
    flex-shrink: 0;
}


.profile-page__content {
}

/* Единый блок контента (карточка) */
.profile-section {
    background: var(--color-white);
    border-radius: var(--rad);
    box-shadow: var(--shadow);
    padding: var(--gap2);
    margin-bottom: 0;
}

.profile-section__title {
    margin: 0 0 var(--gap) 0;
    font-size: 1.25rem;
    font-weight: 600;
}

/* Термин + определение (вывод данных) */
.profile-data {
    display: flex;
    flex-direction: column;
}

.profile-data__row {
    display: flex;
    gap: var(--gap);
    padding: var(--gap) 0;
}

.profile-data__row:not(:last-child) {
    border-bottom: 1px solid var(--ui-border);
}

.profile-data__label {
    color: var(--color-text-grey);
    min-width: 100px;
    flex-shrink: 0;
}

.profile-data__value {
    font-weight: 600;
}

/* Единое пустое состояние */
.profile-empty {
    padding: var(--gap2);
    text-align: center;
}

.profile-empty__text {
    margin: 0 0 var(--gap) 0;
    font-size: 1rem;
    color: var(--color-text-grey);
}

.profile-empty__action {
    margin-top: var(--gap);
}

/* Список турниров для подачи заявки */
.application-tournaments {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap2);
}

.application-tournament-card {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gap2);
    padding: var(--gap2);
    background: var(--color-white);
    border-radius: var(--rad);
    box-shadow: var(--shadow);
}

.application-tournament-card__main {
    flex: 1;
    min-width: 0;
}

.application-tournament-card__name {
    margin: 0 0 var(--gap) 0;
    font-size: 1.125rem;
}

.application-tournament-card__date {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.application-tournament-card__meta {
    margin-bottom: 4px;
}

.application-tournament-card__extra {
    margin: var(--gap) 0 0 0;
    font-size: 0.9375rem;
}

.application-tournament-card__action {
    flex-shrink: 0;
}

/* Подтверждение заявки */
.application-confirm__tournament-meta {
    margin: var(--gap) 0 0 0;
}

.application-confirm__tournament-extra {
    margin: var(--gap) 0 0 0;
    font-size: 0.9375rem;
}

.application-confirm__team-name {
    margin: 0 0 4px 0;
    font-size: 1.125rem;
}

.application-confirm__players {
    list-style: none;
    margin: 0;
    padding: 0;
}

.application-confirm__player {
    display: flex;
    align-items: center;
    gap: var(--gap);
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border, #eee);
}

.application-confirm__player:last-child {
    border-bottom: none;
}

.application-confirm__player-num {
    flex-shrink: 0;
    min-width: 2em;
    font-weight: 600;
}

.application-confirm__player-name {
    flex: 1;
}

.application-confirm__player-captain {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary);
}

.application-confirm__warning {
    background: var(--color-bg-light, #f5f5f5);
    border-radius: var(--rad);
    padding: var(--gap2);
}

.application-confirm__warning-title {
    margin: 0 0 4px 0;
    font-weight: 600;
}

.application-confirm__warning-text {
    margin: 0;
    font-size: 0.9375rem;
}

.application-submitted__message {
    margin: 0 0 var(--gap2) 0;
    font-size: 1.125rem;
}

/* Страница формы (добавление/редактирование) — блок .form-page */
.form-page {
    padding: var(--gap2) var(--gap);
    display: flex;
    justify-content: center;
}

.form-page__inner {
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
}

.form-page__body {
    margin-top: 0;
}

.form-page__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--gap2);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--trans);
}

.form-page__back:hover {
    color: var(--color-primary-dark);
}

.form-page__back svg {
    flex-shrink: 0;
    stroke: currentColor;
}

.form-page__title {
    margin: 0 0 var(--gap2) 0;
    font-size: 1.5rem;
}

.profile-page__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--gap2);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--trans);
}

.profile-page__back:hover {
    color: var(--color-primary-dark);
}

.profile-page__back svg {
    flex-shrink: 0;
    stroke: currentColor;
}

.profile-form {
    margin-top: 0;
}

.form-box {
    background: var(--color-white);
    border-radius: var(--rad);
    box-shadow: var(--shadow);
    padding: var(--gap2);
}

/* Боковое меню профиля (иконка + текст, как в mobile-nav) */
.profile-aside {
    
}
.profile-aside .profile-aside__links,
.profile-aside .profile-aside__footer {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.profile-aside__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: var(--gf) var(--gap);
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--ui-radius, 6px);
    transition: background 0.2s, color 0.2s;
    margin-bottom: var(--gf);
}
.profile-aside__item:last-child {
    margin-bottom: 0;
}

.profile-aside__item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.profile-aside__item:hover {
    background: var(--ui-bg-100, #f0f0f0);
    color: var(--color-primary);
}
.profile-aside__item.active {
    background: var(--color-secondary);
    color: var(--color-white);
}

.profile-aside__item:hover svg,
.profile-aside__item.active svg {
    stroke: currentColor;
}

.profile-aside__footer {
    margin-top: var(--gap2);
    padding-top: var(--gap);
    border-top: 1px dashed var(--thover, rgba(0,0,0,0.1));
}

.profile-aside__item--logout {
    align-self: flex-start;
}

/* Profile Page */
.section-profile__title {
    margin: 0 0 var(--gap2) 0;
    font-size: 1.5rem;
}

/* Profile Hero Card */
.profile-hero {
    display: flex;
    align-items: flex-start;
    gap: var(--gap2);
    padding: var(--gap2);
    background: var(--color-white);
    border-radius: var(--rad);
    box-shadow: var(--shadow);
    margin-bottom: var(--gap);
}

.profile-hero__avatar {
    flex-shrink: 0;
    width: 140px;
    height: 140px;
    border-radius: var(--rad);
    overflow: hidden;
    background: #d4f24e;
}

.profile-hero__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-hero__info {
    flex: 1;
    min-width: 0;
}

.profile-hero__name {
    display: flex;
    align-items: baseline;
    gap: var(--gap);
    margin-bottom: 4px;
}

.profile-hero__name h1 {
    margin: 0;
    font-size: 1.75rem;
}

.profile-hero__tag {
    font-size: 0.9rem;
    color: var(--color-text-grey);
    font-weight: 400;
}

.profile-hero__city {
    font-size: 1rem;
}

.profile-hero__actions {
    flex-shrink: 0;
}

.profile-hero__actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Notifications page */
.notifications-section .profile-empty {
    padding: var(--gap2);
}

.notifications-list {
    display: flex;
    flex-direction: column;
}

.notification-item {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: var(--gap2);
    padding: var(--gap) 0;
    border-bottom: 1px solid var(--ui-border);
    align-items: start;
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-item__date {
    font-size: 0.875rem;
    color: var(--color-text-grey);
}

.notification-item__text {
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--color-text);
}

.btn--round {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
}

.btn--round svg {
    width: 24px;
    height: 24px;
}

.my-teams-section .profile-empty {
    padding: var(--gap2);
}

.my-teams-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.my-team-card {
    display: flex;
    align-items: center;
    gap: var(--gap2);
    padding: var(--gap);
    background: var(--color-white);
    border-radius: var(--rad);
    box-shadow: var(--shadow);
    border: 1px solid var(--ui-border);
}

.my-team-card__avatar {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: #d4f24e;
    display: flex;
    align-items: center;
    justify-content: center;
}

.my-team-card__logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.my-team-card__info {
    flex: 1;
    min-width: 0;
}

.my-team-card__name-row {
    display: flex;
    align-items: baseline;
    gap: var(--gap);
    margin-bottom: 4px;
}

.my-team-card__name {
    font-size: 1.125rem;
    margin: 0;
}

.my-team-card__id {
    font-size: 0.875rem;
    color: var(--color-text-grey);
}

.my-team-card__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--color-text);
}

.my-team-card__meta-icon {
    fill: var(--color-text-grey);
    flex-shrink: 0;
}

.my-team-card__star {
    fill: none;
    stroke: var(--color-primary);
    flex-shrink: 0;
}

.my-team-card__stats {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.my-team-card__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.my-team-card__stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
}

.my-team-card__stat-label {
    font-size: 0.75rem;
    color: var(--color-text-grey);
}

a.my-team-card {
    text-decoration: none;
    color: inherit;
}

/* Профиль своей команды (просмотр в «Мои команды») */
.profile-team-view__header-block {
    margin-bottom: var(--gap2);
}

.profile-team-header {
    display: flex;
    gap: var(--gap2);
    margin-bottom: var(--gap2);
}

.profile-team-header__logo {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: #d4f24e;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-team-header__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-team-header__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gf);
}

.profile-team-header__name {
    margin: 0;
    font-size: 1.5rem;
}

.profile-team-header__id {
    font-size: 0.875rem;
}

.profile-team-header__meta {
    display: flex;
    gap: var(--gap);
}

.profile-team-header__contact {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.profile-team-header__players-row {
    display: flex;
    align-items: center;
    gap: var(--gf);
}

.profile-team-header__players-row svg {
    fill: var(--color-text-grey);
}

.profile-team-view__warning {
    background: var(--ui-bg-100);
    border-radius: var(--rad);
    padding: var(--gap);
    margin-bottom: var(--gap2);
}

.profile-team-view__warning-title {
    margin: 0 0 var(--gf) 0;
    font-weight: 600;
}

.profile-team-view__warning-text {
    margin: 0;
    font-size: 0.9375rem;
}

.profile-team-view__stats-row {
    display: flex;
    align-items: center;
    gap: var(--gap2);
    flex-wrap: wrap;
}

.profile-team-view__stat {
    display: inline-flex;
    align-items: center;
    gap: var(--gf);
}

.profile-team-view__stat svg {
    stroke: var(--color-text);
}

.profile-team-view__description {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}

.profile-team-view__players-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    margin-bottom: var(--gap);
}

.profile-team-view__players-head .profile-section__title {
    margin: 0;
}

.profile-team-view__players-tab {
    padding-bottom: var(--gf);
    border-bottom: 1px solid var(--ui-border);
    margin-bottom: var(--gap);
}

.profile-team-players {
    display: flex;
    flex-direction: column;
    gap: var(--gf);
}

.profile-team-player {
    display: flex;
    align-items: center;
    gap: var(--gap);
    padding: var(--gap);
    background: var(--ui-bg-100);
    border-radius: var(--rad);
}

.profile-team-player__num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-white);
    border: 1px solid var(--ui-border);
    font-size: 0.875rem;
    font-weight: 600;
}

.profile-team-player__name-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--gap);
}

.profile-team-player__name {
    font-weight: 500;
}

.profile-team-player__actions {
    display: flex;
    align-items: center;
    gap: var(--gf);
}

.profile-team-player__captain-tag {
    flex-shrink: 0;
    display: inline-flex;
}

.profile-team-player__captain-tag:empty {
    display: none;
}

.profile-team-player__captain-tag:not(:empty) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 var(--gf);
    line-height: 1;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: var(--ui-radius);
}


.profile-page__header .profile-page__back {
    margin-bottom: 0;
    margin-right: var(--gap);
}

/* My Games page */
.my-games-tabs {
    display: flex;
    gap: 0;
    margin-bottom: var(--gap);
    border-bottom: 1px solid var(--ui-border);
}

.my-games-tabs__btn {
    padding: var(--gap) var(--gap2);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-grey);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: var(--trans);
}

.my-games-tabs__btn:hover {
    color: var(--color-text);
}

.my-games-tabs__btn--active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.my-games-section .profile-empty {
    padding: var(--gap2);
}

.my-games-list {
    margin-bottom: var(--gap2);
}

.my-games-list__panel {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.my-match-card {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding: var(--gap);
    background: var(--color-white);
    border-radius: var(--rad);
    box-shadow: var(--shadow);
    border: 1px solid var(--ui-border);
    text-decoration: none;
    color: inherit;
    transition: var(--trans);
}

.my-match-card:hover {
    border-color: var(--color-primary);
    background: var(--ui-bg-50);
}

.my-match-card__top {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: var(--gap);
    align-items: start;
}

.my-match-card__date {
    font-size: 0.875rem;
    color: var(--color-text-grey);
}

.my-match-card__status-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}

.my-match-card__status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
}

.my-match-card__status--upcoming {
    background: var(--ui-bg-50);
    color: var(--color-text-grey);
}

.my-match-card__status--active {
    background: #d4f24e;
    color: var(--color-text);
}

.my-match-card__status--completed {
    background: var(--ui-bg-50);
    color: var(--color-text);
}

.my-match-card__time {
    font-size: 0.875rem;
    color: var(--color-text-grey);
}

.my-match-card__venue {
    font-size: 0.875rem;
    color: var(--color-text-grey);
    text-align: right;
}

.my-match-card__teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap2);
    padding-top: var(--gap);
    border-top: 1px solid var(--ui-border);
}

.my-match-card__team {
    display: flex;
    align-items: center;
    gap: var(--gap);
    flex: 1;
    min-width: 0;
}

.my-match-card__team--away {
    flex-direction: row-reverse;
}

.my-match-card__logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: #d4f24e;
    flex-shrink: 0;
}

.my-match-card__team-name {
    font-weight: 600;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.my-match-card__score {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    flex-shrink: 0;
    padding: 0 var(--gap);
}

.my-games-footer {
    padding-top: var(--gap);
    border-top: 1px solid var(--ui-border);
}

.my-games-footer__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9375rem;
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--trans);
}

.my-games-footer__link:hover {
    color: var(--color-primary-dark);
}


@media (max-width: 640px) {
    .my-match-card__top {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    
    .my-match-card__venue {
        text-align: left;
    }
    
    .my-match-card__teams {
        flex-direction: column;
        align-items: stretch;
        gap: var(--gap);
    }
    
    .my-match-card__team--away {
        flex-direction: row;
    }
    
    .my-match-card__score {
        text-align: center;
    }
}

@media (max-width: 600px) {
    .my-team-card {
        flex-wrap: wrap;
    }
    
    .my-team-card__stats {
        width: 100%;
        flex-direction: row;
        justify-content: center;
        gap: var(--gap2);
        padding-top: var(--gap);
        border-top: 1px solid var(--ui-border);
    }
    
    .notification-item {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

@media (max-width: 768px) {
    .profile-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .profile-hero__name {
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }
    
    .profile-hero__avatar {
        width: 120px;
        height: 120px;
    }
}

.mobnav__text {
    margin: 0 0 0 8px;
}

.nav {
    display: flex;
    align-items: center;
    gap: var(--gap);
    padding: 8px 4px;
}

.compact-header .nav {
    padding: 4px 4px;
}


.nav a {
    color: var(--color-text);
    transition: var(--trans);
}

.nav a:hover {
    color: var(--color-secondary);
}

.nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap);
}

.mobnav {
    display: none;
    /*display: flex;*/
    align-items: center;
    padding: 8px 0;
    background-color: transparent;
    border: none;
    cursor: pointer;
    width: 30px;
}

.mobnav__icon {

}

.menu-icon-wrapper {
    width: 30px;
    display: block;
}

.menu-icon {
    display: block;
    width: 30px;
    height: 2px;
    transition: all 0.2s;
    background: var(--color-primary-dark);

}

.menu-icon__top {
    transition: all 0.2s;
}

.menu-icon__middle {
    transition: all 0.2s;
    margin: 7px 0;
}

.menu-icon__bottom {
    transition: all 0.2s;
}

.mobnav--active {
}

.mobnav--active .menu-icon__bottom {
    transform: translate(0, -1px) rotate(45deg);
    transition: all 0.2s;
}

.mobnav--active .menu-icon__middle {
    background: rgba(255, 255, 255, 0);
    height: 0;
    margin: 0;
    transition: all 0.2s;
}

.mobnav--active .menu-icon__top {
    transform: translate(0, 1px) rotate(-45deg);
    transition: all 0.2s;
}

@media screen and (max-width: 768px) {
    .mobnav {
        display: flex;
    }

    .nav-links {
        display: none;
    }
}

/* /MAIN NAV */


/* MOBILE NAV */

.mobile-nav {
    display: none;
    background: rgba(255, 255, 255, 0.8);
    width: 100%;
    padding: 8px 16px;
}

.mobile-nav--active {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--gap);
}

.mobile-nav__links {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--gap);
    border-radius: var(--gf);
    padding: 12px var(--gf) var(--gf) var(--gf);
    font-weight: bold;
}

.mobile-nav__links--user {
    border: 1px dashed var(--thover);
    font-weight: normal;
}

.mobile-nav-links__item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    color: var(--color-primary-dark);
}

.mobile-nav-links__item svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--color-primary);
}

.mobile-nav-links__footer {
    border-top: 1px dashed var(--thover);
    width: 100%;
    padding: var(--gf) 0 0 0;
}

.mobile-nav-links__item--logout {
    align-self: end;
}
/* /MOBILE NAV */


/* Main, Page, Aside
------- ------- ------- */
.page {
    width: 100%;
    max-width: var(--wid);
    margin: 0 auto;
    padding: 0 var(--gf);
}

.main {
}

/* /Main, Page, Aside */

/* Footer
------- ------- ------- */
.footer-wrapper {
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    background-color: #eaeef7;
}

.footer {
    width: 100%;
    color: var(--color-text-grey);
    font-size: var(--size-text-note);
    line-height: 1.4;
    display: flex;
    gap: var(--gap);
    row-gap: 8px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 32px;
}

@media screen and (max-width: 768px) {
    .footer {
        flex-direction: column;
        align-items: center;
        padding: 16px 16px 64px 16px;
    }

}

.footer__left {

}


.footer__center {
    color: var(--color-text-light-grey);
    justify-self: center;
    text-align: center;
    padding: 0 16px;
}

.footer__right {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: var(--gf);
    text-align: right;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: var(--gf);
    transition: var(--ui-trans);
    opacity: 0.7;
    filter: grayscale(1);
}

.footer-logo:hover {
    opacity: 1;
    filter: grayscale(0);
}

.footer-logo__text {
    font-family: var(--wf2), sans-serif;
    font-weight: bold;
    color: var(--color-primary);
    line-height: 20px;
    font-size: 20px;
}

.footer-logo__img {
    height: 32px;
}

.footer-logo__img-text {
    height: 16px;
    margin-top: 6px;
}

@media screen and (max-width: 768px) {
    .footer__right {
        align-items: center;
        text-align: center;
    }
}

/* /Footer */


/* (10) TPL Start:
------- ------- ------- ------- ------- ------- -------*/

.content { line-height: 1.5;}


/* =========================== MEDIA ====================================== */
@media screen and (max-width: 768px) {

}

/* =========================== NEW STYLES FOR ASSOC VOLLEY ====================================== */


/* Result Table */
.result-table {
    width: 100%;
    border-collapse: collapse;
}

.result-table td, .result-table th {
    padding: 6px 8px;
    background: rgba(255, 255, 255, 1);
}

.result-table th {
    padding: 10px 12px;
    text-align: left;
}

.result-table td:first-child, .result-table th:first-child {
    color: var(--color-text-light-grey);
    font-size: var(--size-text-note);
}

.result-table tr:nth-child(even) td {
    background: var(--ui-bg-100);
}

/* /Result Table */

/* Scrollable Table */
.ts-table-container-info-layer {
}

.ts-table-container {
}

.ts-table {
    width: 100%;
    border: var(--ui-color-border);
    margin: 0 auto;
    border-collapse: collapse;
    font-size: 0.9rem;
    line-height: 1.5;
    transition: var(--trans);
    background: var(--color-white);
}

@media (max-width: 768px) {

    .ts-table-container {
        border: 1px solid var(--color-secondary);
        overflow-x: auto;
        width: calc(100vw - 24px);
        transition: var(--trans);
    }

    .ts-table-container:hover {
        border: var(--ui-input-border-active);
    }

    .ts-table-container-info-layer {
        position: relative;
        margin: 36px 0;
    }

    .ts-table-container-info-layer::before,
    .ts-table-container-info-layer::after {
        display: flex;
        align-items: center;
        content: 'Прокрутка таблицы';
        position: absolute;
        top: -24px;
        right: 0;
        background: url("../img/icon/icon-hor-scroll.svg") no-repeat right;
        background-size: contain;
        height: 24px;
        padding-right: 30px;
        z-index: 2;
        color: var(--ui-color-text-light-grey);
        font-size: 0.7rem;
        overflow: auto;
    }

    .ts-table-container-info-layer::after {
        top: auto;
        bottom: -24px;
    }
}


/* Section Titles */
.section-title {
    display: flex;
    align-items: center;
    gap: var(--gf);
    padding: 0;
}

.section-title__accent {
    width: 8px;
    height: 40px;
    background: var(--color-primary);
    border-radius: 4px;
    display: inline-block;
}

.section-title__accent--accent {
    background: var(--color-accent);
}

/* News Cards */
.news-card {
    cursor: pointer;
    transition: var(--trans);
}

.news-card:hover h3 {
    color: var(--color-primary);
}

.news-category {
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.news-title {
    font-size: 1.5rem;
    line-height: 1.2;
    padding: 0;
    margin: 0;
}

.news-excerpt {
    line-height: 1.4;
}

.news-divider {
    width: 100%;
    height: 1px;
    background: var(--ui-bg-100);
    margin-top: var(--gf);
}

.news-item {
    padding: var(--gap2) 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.news-item:last-child {
    border-bottom: none;
}

.news-item__meta {
    display: flex;
    align-items: center;
    gap: var(--gap);
    margin-bottom: var(--gf);
}

.news-item__category {
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.news-item__title {
    margin-bottom: var(--gf);
}

.news-item__excerpt {
    margin-bottom: var(--gap);
    line-height: 1.4;
}

/* Match Cards */
.match-card {
    display: flex;
    gap: var(--gap);
    padding: var(--gap);
    background: var(--color-white);
    border-radius: var(--ui-radius);
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: var(--gap);
}

.match-card__date {
    display: flex;
    flex-direction: column;
    gap: var(--gf);
    min-width: 120px;
}

.match-card__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gf);
}

.match-card__title {
    padding: 0;
    margin: 0;
}

.match-card__stage {
    text-transform: uppercase;
}

.match-card__category {
    display: inline-block;
    padding: var(--gf) var(--gap);
    border-radius: var(--ui-radius);
    background: var(--ui-bg-100);
    text-transform: uppercase;
    font-weight: bold;
}

.match-card__category--youth {
    background: rgba(11, 80, 218, 0.1);
    color: var(--color-primary);
}

/* Quick Access Cards */
.quick-access-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--gap2);
    background: var(--color-white);
    border-radius: var(--ui-radius);
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: var(--trans);
    text-decoration: none;
    color: var(--color-text);
}

.quick-access-card:hover {
    box-shadow: var(--sp-shadow-l);
    border-color: var(--color-primary);
}

.quick-access-card__icon {
    font-size: 48px;
    margin-bottom: var(--gap);
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ui-radius);
    background: var(--ui-bg-100);
}

.quick-access-card__icon--teams {
    background: rgba(11, 80, 218, 0.1);
}

.quick-access-card__icon--referees {
    background: rgba(255, 107, 0, 0.1);
}

.quick-access-card__icon--documents {
    background: var(--ui-bg-100);
}

.quick-access-card__icon--partners {
    background: rgba(255, 107, 0, 0.1);
}

.quick-access-card__title {
    font-size: var(--size-heading-s);
    margin-bottom: var(--gf);
}

.quick-access-card__desc {
    color: var(--color-text-grey);
}

/* Gallery */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
}

.gallery-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--ui-radius);
    overflow: hidden;
    background: var(--ui-bg-100);
    background-size: cover;
    background-position: center;
    transition: var(--trans);
}

.gallery-item:hover {
    transform: scale(1.05);
}

.gallery-item--large {
    grid-column: span 2;
    grid-row: span 2;
}

/* Partners */
.partners-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap2);
}

.partner-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gap);
    background: var(--color-white);
    border-radius: var(--ui-radius);
    border: 1px solid rgba(0, 0, 0, 0.1);
    min-height: 100px;
}

.partner-item__logo {
    width: 100%;
    height: 60px;
    object-fit: contain;
}

/* Competition Cards */
.competition-card {
    background: var(--color-white);
    border-radius: var(--ui-radius);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: var(--gap2);
    margin-bottom: var(--gap);
    transition: var(--trans);
}

.competition-card:hover {
    box-shadow: var(--sp-shadow-l);
}

.competition-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--gap);
}

.competition-card__title {
    padding: 0;
    margin: 0;
}

.competition-card__status {
    padding: var(--gf) var(--gap);
    border-radius: var(--ui-radius);
    text-transform: uppercase;
}

.competition-card__status--active {
    background: rgba(46, 212, 122, 0.1);
    color: var(--color-green);
}

.competition-card__info {
    display: flex;
    flex-direction: column;
    gap: var(--gf);
    margin-bottom: var(--gap);
}

.competition-card__field {
    display: flex;
    gap: var(--gf);
}

.competition-card__category {
    display: inline-block;
    padding: var(--gf) var(--gap);
    border-radius: var(--ui-radius);
    background: var(--ui-bg-100);
    text-transform: uppercase;
    font-weight: bold;
}

.competition-card__category--youth {
    background: rgba(11, 80, 218, 0.1);
    color: var(--color-primary);
}

.competition-card__footer {
    display: flex;
    justify-content: flex-end;
}

/* Team Cards */
.team-card {
    background: var(--color-white);
    border-radius: var(--ui-radius);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: var(--gap2);
    text-align: center;
    transition: var(--trans);
}

.team-card:hover {
    box-shadow: var(--sp-shadow-l);
}

.team-card__logo {
    width: 100px;
    height: 100px;
    background: var(--ui-bg-100);
    border-radius: 50%;
    margin: 0 auto var(--gap);
}

.team-card__name {
    margin-bottom: var(--gap);
}

.team-card__info {
    display: flex;
    flex-direction: column;
    gap: var(--gf);
    margin-bottom: var(--gap);
}

/* Player Cards */
.player-card {
    display: flex;
    flex-direction: column;
    padding: var(--gap2);
    background: var(--color-white);
    border-radius: var(--ui-radius);
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: var(--trans);
}

.player-card:hover {
    border-color: var(--ui-bg-200);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.player-card__photo {
    width: 100%;
    height: 250px;
    background: var(--ui-bg-100);
    border-radius: var(--ui-radius);
    margin-bottom: var(--gap);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.player-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.player-card__info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.player-card__name {
    font-size: 1.25rem;
    padding: 0;
    margin: 0 0 var(--gap) 0;
    color: var(--color-navy-deep-mock);
}

.player-card__details {
    margin-bottom: var(--gap);
    flex-grow: 1;
}

.player-card__detail {
    margin-bottom: var(--gf);
}

.player-card__detail:last-child {
    margin-bottom: 0;
}

.player-card__action {
    align-self: flex-start;
}

/* Nearest Match Card */
.nearest-match-card {
    display: block;
    background: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--ui-radius);
    padding: var(--gap2);
    transition: var(--trans);
    text-decoration: none;
    color: inherit;
}

.nearest-match-card:hover {
    border-color: var(--ui-bg-200);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.nearest-match-card__title {
    font-size: 1rem;
    margin-bottom: var(--gap);
    color: var(--color-navy-deep-mock);
}

.nearest-match-card__date {
    margin-bottom: var(--gf);
}

.nearest-match-card__teams {
    display: flex;
    align-items: center;
    gap: var(--gap);
    flex-wrap: wrap;
    margin-bottom: var(--gf);
}

.nearest-match-card__team-logo {
    width: 32px;
    height: 32px;
    display: inline-block;
    vertical-align: middle;
}

.nearest-match-card__team-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.nearest-match-card__score {
    color: var(--color-primary-mock);
}

.nearest-match-card__comp {
    font-size: 0.875rem;
}

/* Nearest Games Widget */
.nearest-games-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--gap2);
}

/* Upcoming Match Item */
.upcoming-match-item {
    display: flex;
    align-items: center;
    gap: var(--gap);
    padding: var(--gap);
    background: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--ui-radius);
    text-decoration: none;
    color: inherit;
    transition: var(--trans);
}

.upcoming-match-item:hover {
    border-color: var(--ui-bg-200);
    background: var(--ui-bg-50);
}

.upcoming-match-item__date {
    min-width: 140px;
}

.upcoming-match-item__score {
    color: var(--color-primary-mock);
}

/* Match Roster */
.match-roster__player {
    display: flex;
    align-items: center;
    gap: var(--gap);
    padding: var(--gf) 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.match-roster__player:last-child {
    border-bottom: none;
}

.match-roster__number {
    min-width: 2em;
}

/* Referees */
.referee-category,
.referee-category--1,
.referee-category--2,
.referee-category--3,
.referee-category--grey,
.referee-category--primary,
.referee-category--accent {
    display: inline-block;
    padding: 0.35em 0.75em;
    border-radius: var(--ui-radius);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.3;
    background: rgba(0, 0, 0, 0.12);
    color: var(--color-text-secondary, #555);
}

.referees-registry .referees-filters {
    margin-bottom: var(--gap2);
}

.referees-empty {
    padding: var(--gap2);
}

.referees-cards {
    margin-top: var(--gap);
    grid-template-columns: 1fr;
    gap: var(--gap);
}

.referee-card {
    background: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--ui-radius);
    padding: var(--gap);
    transition: var(--trans);
    margin-bottom: var(--gap);
}
.referee-card:last-child {
    margin-bottom: 0;
}

.referee-card:hover {
    box-shadow: var(--sp-shadow-l);
}

.referee-card__name {
    font-size: var(--size-heading-s, 1.25rem);
    margin: 0 0 var(--gap);
}

.referee-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap);
    margin: 0 0 var(--gap);
}

.referee-card__city {
    margin: 0;
}

.referee-card__contact {
    margin: 0;
}

.appointments-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--gap);
    margin-bottom: var(--gap2);
}

.appointment-card {
    background: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--ui-radius);
    padding: var(--gap2);
    transition: var(--trans);
}

.appointment-card:hover {
    box-shadow: var(--sp-shadow-l);
}

.appointment-card__date {
    margin: 0 0 var(--gf);
    font-size: 0.875rem;
}

.appointment-card__match {
    font-size: var(--size-heading-s, 1.25rem);
    margin: 0 0 var(--gap);
    line-height: 1.3;
}

.appointment-card__referee {
    margin: 0 0 var(--gf);
}

.appointment-card__venue {
    margin: 0;
    font-size: 0.9375rem;
}

/* Media */
.gallery-album {
    background: var(--color-white);
    border-radius: var(--ui-radius);
    border: 1px solid rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: var(--trans);
}

.gallery-album:hover {
    box-shadow: var(--sp-shadow-l);
}

.gallery-album__cover {
    width: 100%;
    aspect-ratio: 16/9;
    background: var(--ui-bg-100);
    background-size: cover;
    background-position: center;
}

.gallery-album__title {
    padding: var(--gap);
    margin: 0;
}

.video-item {
    background: var(--color-white);
    border-radius: var(--ui-radius);
    border: 1px solid rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: var(--trans);
}

.video-item:hover {
    box-shadow: var(--sp-shadow-l);
}

.video-item__thumbnail {
    width: 100%;
    aspect-ratio: 16/9;
    background: var(--ui-bg-100);
    background-size: cover;
    background-position: center;
}

.video-item__title {
    padding: var(--gap);
    margin: 0;
}

/* Documents */
.document-item {
    display: flex;
    align-items: center;
    gap: var(--gap);
    padding: var(--gap);
    background: var(--color-white);
    border-radius: var(--ui-radius);
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: var(--gap);
}

.document-item__icon {
    font-size: 32px;
    flex-shrink: 0;
}

.document-item__info {
    flex: 1;
}

.document-item__title {
    margin-bottom: var(--gf);
}

.document-item__meta {
    display: flex;
    gap: var(--gf);
    align-items: center;
}

/* Venues */
.venue-card {
    background: var(--color-white);
    border-radius: var(--ui-radius);
    border: 1px solid rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: var(--trans);
}

.venue-card:hover {
    box-shadow: var(--sp-shadow-l);
}

.venue-card__photo {
    width: 100%;
    aspect-ratio: 16/9;
    background: var(--ui-bg-100) url(../img/place-placeholder.jpg) center/cover no-repeat;
    overflow: hidden;
}

.venue-card__photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.venue-card__info {
    padding: var(--gap2);
}

.venue-card__title {
    margin-bottom: var(--gap);
}

.venue-card__details {
    display: flex;
    flex-direction: column;
    gap: var(--gf);
    margin-bottom: var(--gap);
}

/* Partnership */
.benefit-card {
    background: var(--color-white);
    border-radius: var(--ui-radius);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: var(--gap2);
    text-align: center;
}

.benefit-card__icon {
    font-size: 48px;
    margin-bottom: var(--gap);
}

.benefit-card__title {
    margin-bottom: var(--gf);
}

/* Auth Pages */

.section-auth {
    background: url(/img/pattern-light-bg.jpg) repeat;
    width: 100%;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card {
    background: var(--color-white);
    border-radius: calc(var(--ui-radius) * 2);
    padding: var(--gap2);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: var(--sp-shadow-m);
    margin: 0 auto;
}

.auth-card--success {
    border-color: var(--color-green);
}

.auth-card--error {
    border-color: var(--color-red);
}

.auth-message-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(46, 212, 122, 0.1);
    color: var(--color-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin: 0 auto var(--gap);
}

.auth-message-icon--error {
    background: rgba(247, 104, 91, 0.1);
    color: var(--color-red);
}

.auth-links {
    text-align: center;
}

/* Admin Pages */
.section-admin {
    min-height: 60vh;
}

.admin-nav-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--gap2);
    background: var(--color-white);
    border-radius: var(--ui-radius);
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: var(--trans);
    text-decoration: none;
    color: var(--color-text);
}

.admin-nav-card:hover {
    box-shadow: var(--sp-shadow-l);
    border-color: var(--color-primary);
}

.admin-nav-card__icon {
    font-size: 48px;
    margin-bottom: var(--gap);
}

.admin-nav-card__title {
    font-size: var(--size-heading-xs);
}

.admin-stat-card {
    background: var(--color-white);
    border-radius: var(--ui-radius);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: var(--gap2);
    text-align: center;
}

.admin-stat-card__value {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: var(--gf);
}

.admin-stat-card__label {
    color: var(--color-text-grey);
    text-transform: uppercase;
    font-size: var(--size-text-note);
}

.admin-card {
    background: var(--color-white);
    border-radius: var(--ui-radius);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: var(--gap2);
    margin-bottom: var(--gap2);
}

.admin-profile-field {
    display: flex;
    gap: var(--gap);
    padding: var(--gap) 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.admin-profile-field:last-child {
    border-bottom: none;
}

.wizard-step {
    display: none;
}

.wizard-step--active {
    display: block;
}

.employee-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--gap);
    background: var(--ui-bg-100);
    border-radius: var(--ui-radius);
    margin-bottom: var(--gap);
}

.admin-table {
    background: var(--color-white);
    border-radius: var(--ui-radius);
    border: 1px solid rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.admin-table__row {
    transition: var(--trans);
}

.admin-table__row:hover {
    background: var(--ui-bg-100);
}

.event-status {
    display: inline-block;
    padding: var(--gf) var(--gap);
    border-radius: var(--ui-radius);
    text-transform: uppercase;
}

.event-status--planned {
    background: rgba(11, 80, 218, 0.1);
    color: var(--color-primary);
}

.event-status--past {
    background: var(--ui-bg-100);
    color: var(--color-text-grey);
}

.admin-news-item {
    display: flex;
    align-items: center;
    gap: var(--gap2);
    padding: var(--gap);
    background: var(--color-white);
    border-radius: var(--ui-radius);
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: var(--gap);
}

.admin-news-item__info {
    flex: 1;
}

.admin-news-item__title {
    margin-bottom: var(--gf);
}

.news-status {
    display: inline-block;
    padding: var(--gf) var(--gap);
    border-radius: var(--ui-radius);
    text-transform: uppercase;
}

.news-status--published {
    background: rgba(46, 212, 122, 0.1);
    color: var(--color-green);
}

.news-status--draft {
    background: var(--ui-bg-100);
    color: var(--color-text-grey);
}

.admin-document-item {
    display: flex;
    align-items: center;
    gap: var(--gap);
    padding: var(--gap);
    background: var(--color-white);
    border-radius: var(--ui-radius);
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: var(--gap);
}

.admin-document-item__icon {
    font-size: 32px;
    flex-shrink: 0;
}

.admin-document-item__info {
    flex: 1;
}

.admin-document-item__title {
    margin-bottom: var(--gf);
}

.user-role {
    display: inline-block;
    padding: var(--gf) var(--gap);
    border-radius: var(--ui-radius);
}

.user-role--admin {
    background: rgba(247, 104, 91, 0.1);
    color: var(--color-red);
}

.user-role--manager {
    background: rgba(11, 80, 218, 0.1);
    color: var(--color-primary);
}

.user-status {
    display: inline-block;
    padding: var(--gf) var(--gap);
    border-radius: var(--ui-radius);
}

.user-status--active {
    background: rgba(46, 212, 122, 0.1);
    color: var(--color-green);
}

.admin-federation-card {
    background: var(--color-white);
    border-radius: var(--ui-radius);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: var(--gap2);
    margin-bottom: var(--gap);
}

.admin-federation-card__title {
    margin-bottom: var(--gap);
}

.admin-federation-card__info {
    display: flex;
    flex-direction: column;
    gap: var(--gf);
    margin-bottom: var(--gap);
}

.admin-federation-card__actions {
    display: flex;
    justify-content: flex-end;
}

/* Active nav link */
.nav-links__item.active,
.mobile-nav-links__item.active {
    color: var(--color-primary);
}

/* Sitemap */
.sitemap-section {
    background: var(--color-white);
    border-radius: var(--ui-radius);
    padding: var(--gap2);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.sitemap-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--gap2);
}

.sitemap-category {
    margin-bottom: var(--gap);
}

.sitemap-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gf);
}

.sitemap-list li {
    padding: var(--gf) 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.sitemap-list li:last-child {
    border-bottom: none;
}

.sitemap-list a {
    color: var(--color-link);
    text-decoration: none;
    transition: var(--trans);
    display: flex;
    align-items: center;
    gap: var(--gf);
}

.sitemap-list a:hover {
    color: var(--color-link-hover);
    padding-left: var(--gf);
}

.sitemap-list a::before {
    content: '→';
    opacity: 0;
    transition: var(--trans);
}

.sitemap-list a:hover::before {
    opacity: 1;
}

/* Detail Pages */
.news-detail__content {
    background: var(--color-white);
    border-radius: var(--ui-radius);
    padding: var(--gap2);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.team-detail__logo,
.player-detail__photo,
.venue-detail__main-photo {
    background-size: cover;
    background-position: center;
}

.team-detail__section,
.player-detail__section,
.venue-detail__section,
.competition-detail__section {
    margin-bottom: calc(var(--gap) * 3);
}

/* Team Detail Page */
.team-detail__header {
    display: flex;
    gap: var(--gap2);
    margin-bottom: calc(var(--gap) * 3);
}

.team-detail__logo {
    width: 200px;
    height: 200px;
    background: var(--ui-bg-100);
    border-radius: var(--ui-radius);
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-detail__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.team-detail__logo--placeholder img {
    opacity: 0.3;
}

.team-detail__info {
    flex: 1;
}

.team-detail__title {
    margin-bottom: var(--gap);
}

.team-detail__meta {
    display: flex;
    flex-direction: column;
    gap: var(--gf);
}

.team-detail__section-title {
    margin-bottom: var(--gap);
}

/* Club Info Block */
.club-info {
    display: flex;
    align-items: center;
    gap: var(--gap2);
}

.club-info__logo {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.club-info__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .gallery-item--large {
        grid-column: span 2;
        grid-row: span 1;
    }
    
    .partners-list {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .admin-table__header,
    .admin-table__row {
        grid-template-columns: 1fr;
        gap: var(--gf);
    }
    
    .admin-table__header > div,
    .admin-table__row > div {
        grid-column: span 1 !important;
    }
    
    .team-detail__header,
    .player-detail__header {
        flex-direction: column;
    }
    
    .team-detail__logo,
    .player-detail__photo {
        width: 100%;
        max-width: 200px;
        margin: 0 auto;
    }
}

/* ==========================================================
   Index page layout helpers
   ========================================================== */

:root {
    --color-primary-mock: #0b50da;
    --color-accent-mock: #ff6b00;
    --color-background-light-mock: #f5f6f8;
    --color-background-dark-mock: #0a0e17;
    --color-navy-deep-mock: #071e4d;
}

/* Cards and media from index */
.dashboard-card {
    background: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--ui-radius);
    padding: var(--gap);
    transition: var(--trans);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.dashboard-card:hover {
    box-shadow: var(--sp-shadow-l);
    border-color: var(--color-primary-mock);
}

.agenda-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gap);
    padding: var(--gap) 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    align-items: center;
}

.agenda-row:hover {
    background: var(--ui-bg-100);
}

.news-card {
    cursor: pointer;
    transition: var(--trans);
}

.news-card:hover h3 {
    color: var(--color-primary-mock);
}

.media-gallery-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--ui-radius);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    transition: var(--trans);
}

.media-gallery-item:hover {
    transform: scale(1.05);
}

.media-gallery-item--ph-sm {
    background-image: url('https://via.placeholder.com/300');
}

.media-gallery-item--ph-lg {
    background-image: url('https://via.placeholder.com/600');
}


/* ====================================
   Общие классы для секций
   ==================================== */

.section-page {
    margin-bottom: calc(var(--gap) * 5);
}

.section-page--large {
    margin-bottom: calc(var(--gap) * 6);
}

.section-page__container {
    padding: var(--gap2) var(--gap);
}

.section-page__container--narrow {
    padding: 0 var(--gap);
}

.section-page__title {
    margin-bottom: var(--gap2);
}

.about-members {
    display: flex;
    flex-direction: column;
    gap: var(--gap2);
}

.about-member-card {
    display: flex;
    align-items: flex-start;
    gap: var(--gap2);
    padding: var(--gap2);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--ui-radius);
    background: var(--ui-bg-50, #fafafa);
}

.about-member-card--photo {
    display:grid;
    grid-template-columns: 80px 1fr;
    gap: var(--gap);
}

.about-member-card__photo {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--ui-radius);
}

.about-member-card__logo {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.about-member-card__body {
    flex: 1;
    min-width: 0;
}

.about-member-card__region {
    font-size: var(--size-heading-s, 1.25rem);
    margin-bottom: var(--gap);
}

.about-member-card__org {
    margin-bottom: var(--gap);
    color: var(--color-text-secondary, #555);
}

.about-member-card__body p {
    margin-bottom: var(--gf);
}

.about-member-card__body p:last-child {
    margin-bottom: 0;
}

.structure-cards {
    margin-top: var(--gap2);
}

.structure-card__name {
    font-size: var(--size-heading-m, 1.5rem);
    line-height: 1.1;
    padding: 0;
    font-family: var(--wf2);
}

.structure-card__role {
    margin-bottom: var(--gf);
    font-size: var(--size-text-note);
}

.structure-card__org-row {
    display: flex;
    align-items: center;
    gap: var(--gap);
    margin-bottom: 0;
}

.structure-card__org-logo {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.structure-card__org {
    margin: 0;
    color: var(--color-text-secondary, #555);
    font-size: 0.9375rem;
}

/* Заголовок секции с ссылкой */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: calc(var(--gap) * 2.5);
}

.section-header--end {
    align-items: flex-end;
}

.section-header__link {
    font-size: 0.9rem;
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    transition: var(--trans);
}

.section-header__link:hover {
    color: var(--color-primary-dark);
}

/* Grid gap utilities */
.grid-gap-1 {
    gap: var(--gap);
}

.grid-gap-2 {
    gap: var(--gap2);
}

/* Фильтры */
.filters {
    margin-bottom: var(--gap2);
}

.filters__row {
    gap: var(--gap);
}

.filters__col-3 {
    grid-column: span 3;
}

.filters__col-4 {
    grid-column: span 4;
}

.filters__col-6 {
    grid-column: span 6;
}

/* Карточки новостей */
.news-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.news-card__meta {
    display: flex;
    align-items: center;
    gap: var(--gap);
}

/* ====================================
   Секции команд
   ==================================== */

.teams-section {
    border-radius: var(--ui-radius);
    overflow: hidden;
}

.teams-section--mb {
    margin-bottom: var(--gap2);
}

.teams-section__header {
    background: var(--color-primary);
    color: var(--color-white);
    padding: var(--gap) var(--gap2);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.teams-section__header-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.teams-section__subtitle {
    font-size: 0.75rem;
    opacity: 0.8;
    letter-spacing: 0.02em;
}

.teams-section__title {
    font-size: 1.1rem;
    margin: 0;
    padding: 0;
}

.teams-section__count {
    font-size: 0.85rem;
    opacity: 0.9;
}

/* Список команд */
.teams-list {
    display: grid;
    gap: var(--gap2);
}

.teams-list--grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.teams-list--grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* ====================================
   Простые карточки команд
   ==================================== */

.team-card-simple {
    background: var(--color-white);
    padding: var(--gap) var(--gf);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap);
    transition: var(--trans);
    border-radius: var(--ui-radius);
    border: 1px solid var(--ui-bg-100);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.team-card-simple__body {
    min-width: 0;
    flex: 1;
}

.team-card-simple:hover {
    background: var(--ui-bg-50);
    border-color: var(--ui-bg-200);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.team-card-simple__logo-wrap {
    flex-shrink: 0;
}
.team-card-simple__logo {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--ui-radius);
    overflow: hidden;
    background: var(--ui-bg-100);
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: contain;
}

.team-card-simple__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.team-card-simple__logo--placeholder img {
    opacity: 0.4;
}

.team-card-simple__name {
    font-family: var(--wf);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-primary-dark);
}

.team-card-simple__details {
    display: flex;
    gap: var(--gap);
    align-items: center;
}

.team-card-simple__region {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-grey);
    background: var(--ui-bg-100);
    padding: 2px 8px;
    border-radius: 4px;
}

.team-card-simple__sex {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
}

.team-card-simple__sex--female {
    background: rgba(233, 30, 99, 0.1);
    color: #c2185b;
}

.team-card-simple__sex--male {
    background: rgba(33, 150, 243, 0.1);
    color: #1976d2;
}

/* Адаптивность для карточек команд */
@media (max-width: 768px) {
    .teams-list--grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .teams-list--grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .teams-section__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gf);
    }
}

@media (max-width: 480px) {
    .teams-list--grid-4,
    .teams-list--grid-3 {
        grid-template-columns: 1fr;
    }
}


.bg-wrapper {
    background: url(/img/pattern-bg.jpg) repeat;
    padding: var(--gap2) 0;
}

.bg-wrapper__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-white);
    text-align: center;
}

/* ====================================
   Календарь событий
   ==================================== */

.events-calendar {
    background: var(--ui-bg-100);
    border-radius: var(--ui-radius);
    overflow: hidden;
}

.events-calendar__header {
    background: var(--color-primary);
    color: var(--color-white);
    padding: var(--gap) var(--gap2);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.events-calendar__month {
    font-family: var(--wf);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: var(--gap);
}

.events-calendar__icon {
    font-size: 1.2rem;
}

.events-calendar__link {
    color: var(--color-white);
    font-size: 0.85rem;
    text-decoration: none;
    padding: 4px 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    transition: var(--trans);
}

.events-calendar__link:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.events-calendar__item {
    background: var(--color-white);
    border-bottom: 1px solid rgba(11,21,53,0.2);
    padding: var(--gap2);
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: var(--gap2);
    align-items: center;
    transition: var(--trans);
}

.events-calendar__item:hover {
    background: var(--ui-bg-50);
}

.events-calendar__dates {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.events-calendar__date-range {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.events-calendar__day {
    font-family: var(--wf);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-secondary);
    font-style: italic;
    line-height: 1;
}

.events-calendar__separator {
    font-family: var(--wf);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-secondary);
}

.events-calendar__month-year {
    display: flex;
    gap: 20px;
    font-size: 0.75rem;
    color: var(--color-secondary);
    font-weight: 600;
    text-transform: uppercase;
}

.events-calendar__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.events-calendar__federation {
    font-size: 0.7rem;
    color: var(--color-text-grey);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.events-calendar__title {
    font-family: var(--wf);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.events-calendar__details {
    font-size: 0.8rem;
    color: var(--color-text-grey);
}

.events-calendar__location {
    font-size: 0.9rem;
    color: var(--color-text);
    font-weight: 500;
    text-align: right;
    padding-right: var(--gap);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.events-calendar__city {
    font-weight: 500;
}

.events-calendar__status {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.events-calendar__status--active {
    background: rgba(76, 175, 80, 0.15);
    color: #2e7d32;
}

.events-calendar__status--completed {
    background: rgba(158, 158, 158, 0.15);
    color: #616161;
}

.events-calendar__badge {
    font-size: 0.8rem;
    opacity: 0.8;
}

/* Кликабельные элементы календаря */
a.events-calendar__item {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

a.events-calendar__item:hover {
    background: var(--ui-bg-100);
}

a.events-calendar__item:hover .events-calendar__title {
    color: var(--color-primary);
}

/* ====================================
   Страница соревнования
   ==================================== */

/* Шапка соревнования */
.comp-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--gap2);
    padding: var(--gap2);
    background: var(--color-white);
    border-radius: var(--ui-radius);
    margin-bottom: var(--gap2);
    border: 1px solid var(--ui-bg-100);
}

.comp-header__info {
    flex: 1;
}

.comp-header__federation {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary);
    background: rgba(0, 70, 130, 0.1);
    padding: 4px 12px;
    border-radius: 4px;
    margin-bottom: var(--gap);
    letter-spacing: 0.03em;
}

.comp-header__title {
    font-size: 1.5rem;
    margin-bottom: var(--gap);
}

.comp-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap2);
    font-size: 0.9rem;
    color: var(--color-text-grey);
}

.comp-header__meta span::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    background: var(--color-text-grey);
    border-radius: 50%;
    margin-right: var(--gap);
    vertical-align: middle;
}

.comp-header__meta span:first-child::before {
    display: none;
}

.comp-status {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    white-space: nowrap;
}

.comp-status--completed {
    background: rgba(158, 158, 158, 0.15);
    color: #616161;
}

.comp-status--active {
    background: rgba(76, 175, 80, 0.15);
    color: #2e7d32;
}

.comp-status--upcoming {
    background: rgba(33, 150, 243, 0.15);
    color: #1976d2;
}

/* Табы */
.comp-tabs {
    background: var(--color-white);
    border-radius: var(--ui-radius);
    overflow: hidden;
    border: 1px solid var(--ui-bg-100);
}

.comp-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    background: var(--ui-bg-50);
    border-bottom: 1px solid var(--ui-bg-100);
    padding: 0 var(--gap);
}

.comp-tabs__btn {
    padding: var(--gap) var(--gap2);
    font-size: 0.9rem;
    color: var(--color-text-grey);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: var(--trans);
    position: relative;
    font-family: var(--sf);
}

.comp-tabs__btn:hover {
    color: var(--color-primary);
}

.comp-tabs__btn--active {
    color: var(--color-primary);
    
}

.comp-tabs__btn--active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-primary);
}

.comp-tabs__content {
    padding: var(--gap2);
}

.comp-tab-panel {
    display: none;
}

.comp-tab-panel--active {
    display: block;
}

/* Карточки контента */
.comp-card {
    background: var(--ui-bg-50);
    border-radius: var(--ui-radius);
    padding: var(--gap2);
}

.comp-card__title {
    font-family: var(--wf);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: var(--gap);
}

.comp-card__content {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text);
}

.comp-card__content p {
    margin-bottom: var(--gap);
}

.comp-card__actions {
    margin-top: var(--gap2);
    padding-top: var(--gap);
    border-top: 1px solid var(--ui-bg-100);
}

.comp-list {
    list-style: none;
    padding: 0;
    margin: var(--gap) 0 0 0;
}

.comp-list li {
    padding: var(--gf) 0;
    padding-left: var(--gap2);
    position: relative;
}

.comp-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 700;
}

/* Расписание матчей */
.schedule-day {
    margin-bottom: var(--gap2);
}

.schedule-day__header {
    font-family: var(--wf);
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-primary);
    padding: var(--gap) var(--gap2);
    background: var(--ui-bg-50);
    border-radius: var(--ui-radius);
    margin-bottom: var(--gap);
}

.schedule-list {
    display: flex;
    flex-direction: column;
    gap: var(--gf);
}

.schedule-match {
    display: grid;
    grid-template-columns: 100px 1fr 60px;
    gap: var(--gap);
    padding: var(--gap) var(--gap2);
    background: var(--color-white);
    border: 1px solid var(--ui-bg-100);
    border-radius: var(--ui-radius);
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: var(--trans);
    margin-bottom: var(--gf);
}
.schedule-match:last-child {
    margin-bottom: 0;
}

a.schedule-match:hover {
    border-color: var(--color-primary);
    background: var(--ui-bg-50);
}

a.schedule-match:hover .schedule-match__teams span:first-child,
a.schedule-match:hover .schedule-match__teams span:last-child {
    color: var(--color-primary);
}

.schedule-match__datetime {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.2;
}

.schedule-match__date {
    font-size: 0.75rem;
    color: var(--color-text-grey);
}

.schedule-match__time {
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.9rem;
}

.schedule-match__teams {
    display: flex;
    align-items: center;
    gap: var(--gap);
    font-size: 0.95rem;
}

.schedule-match__vs {
    color: var(--color-text-grey);
    font-size: 0.8rem;
}

.schedule-match__score {
    font-family: var(--wf);
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-secondary);
    text-align: right;
}

/* Турнирная таблица */
.standings-table {
    border: 1px solid var(--ui-bg-100);
    border-radius: var(--ui-radius);
    overflow: hidden;
}

.standings-table__header {
    display: grid;
    grid-template-columns: 40px 1fr repeat(5, 50px) 50px;
    gap: var(--gf);
    padding: var(--gap) var(--gap2);
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: 600;
    font-size: 0.85rem;
}

.standings-table__row {
    display: grid;
    grid-template-columns: 40px 1fr repeat(5, 50px) 50px;
    gap: var(--gf);
    padding: var(--gap) var(--gap2);
    border-bottom: 1px solid var(--ui-bg-100);
    font-size: 0.9rem;
    transition: var(--trans);
}

.standings-table__row:last-child {
    border-bottom: none;
}

.standings-table__row:hover {
    background: var(--ui-bg-50);
}

.standings-table__row--gold {
    background: rgba(255, 215, 0, 0.1);
}

.standings-table__row--silver {
    background: rgba(192, 192, 192, 0.1);
}

.standings-table__row--bronze {
    background: rgba(205, 127, 50, 0.1);
}

.standings-col {
    text-align: center;
}

.standings-col--pos {
    font-weight: 600;
}

.standings-col--team {
    text-align: left;
    font-weight: 500;
}

.standings-col--pts {
    font-weight: 700;
    color: var(--color-primary);
}

/* Протоколы */
.protocols-list {
    display: flex;
    flex-direction: column;
    gap: var(--gf);
}

.protocol-item {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: var(--gap);
    padding: var(--gap) var(--gap2);
    background: var(--color-white);
    border: 1px solid var(--ui-bg-100);
    border-radius: var(--ui-radius);
    text-decoration: none;
    color: inherit;
    align-items: center;
    transition: var(--trans);
}

.protocol-item:hover {
    border-color: var(--color-primary);
    background: var(--ui-bg-50);
}

.protocol-item__icon {
    font-size: 1.5rem;
}

.protocol-item__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.protocol-item__title {
    font-weight: 500;
    font-size: 0.95rem;
}

.protocol-item__meta {
    font-size: 0.8rem;
    color: var(--color-text-grey);
}

.protocol-item__download {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary);
}

/* Место проведения */
.venue-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap2);
}

.venue-info__card {
    background: var(--ui-bg-50);
    border-radius: var(--ui-radius);
    padding: var(--gap2);
}

.venue-info__title {
    font-family: var(--wf);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: var(--gap);
}

.venue-info__details {
    display: flex;
    flex-direction: column;
    gap: var(--gf);
}

.venue-info__row {
    display: flex;
    gap: var(--gap);
    font-size: 0.9rem;
}

.venue-info__label {
    color: var(--color-text-grey);
    min-width: 100px;
}

.venue-info__map {
    border-radius: var(--ui-radius);
    overflow: hidden;
}

.venue-map-placeholder {
    height: 100%;
    min-height: 200px;
    background: var(--ui-bg-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-grey);
    font-size: 0.9rem;
}

/* Статистика */
.stats-section {
    margin-bottom: var(--gap2);
}

.stats-section__title {
    font-family: var(--wf);
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: var(--gap);
    color: var(--color-primary);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
}

.stats-card {
    background: var(--ui-bg-50);
    border-radius: var(--ui-radius);
    padding: var(--gap);
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.stats-card__label {
    font-size: 0.75rem;
    color: var(--color-text-grey);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.stats-card__value {
    font-family: var(--wf);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-primary-dark);
}

.stats-card__team {
    font-size: 0.8rem;
    color: var(--color-text-grey);
}

.stats-card__stat {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-secondary);
}

/* Кнопка возврата */
.comp-back {
    margin-top: var(--gap2);
    padding-top: var(--gap2);
    border-top: 1px solid var(--ui-bg-100);
}

/* ====================================
   Страница матча
   ==================================== */

/* Шапка матча */
.match-header {
    background: var(--color-white);
    border-radius: var(--ui-radius);
    padding: var(--gap2);
    margin-bottom: var(--gap2);
    border: 1px solid var(--ui-bg-100);
}

.match-header__meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap);
    font-size: 0.9rem;
    color: var(--color-text-grey);
    margin-bottom: var(--gap2);
}

.match-header__meta span::after {
    content: ',';
    margin-left: 2px;
}

.match-header__meta span:last-child::after {
    content: '';
}

.match-header__round {
    color: var(--color-primary);
    font-weight: 600;
}

.match-header__round::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    background: var(--color-primary);
    border-radius: 50%;
    margin-right: var(--gap);
    vertical-align: middle;
}

.match-header__teams {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap2);
}

/* Команда в шапке */
.match-team {
    display: flex;
    align-items: center;
    gap: var(--gap);
    flex: 1;
}

.match-team--home {
    flex-direction: row-reverse;
    text-align: right;
}

.match-team--away {
    justify-content: flex-start;
    text-align: left;
}

.match-team__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.match-team__name {
    font-family: var(--wf);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--color-primary);
    font-style: italic;
    margin: 0;
}

.match-team__city {
    font-size: 0.85rem;
    color: var(--color-text-grey);
}

.match-team__logo {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.match-team__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 2px solid var(--ui-bg-200);
}

/* Счёт матча */
.match-header__score {
    display: flex;
    align-items: center;
    gap: var(--gap);
    padding: 0 var(--gap2);
}
.match-score {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    line-height: 1;
}
.match-score__home,
.match-score__away {
    font-family: var(--wf);
    font-weight: 700;
    font-size: 3rem;
    color: var(--color-primary-dark);
    line-height: 1;
}

.match-score__separator {
    font-size: 2rem;
    color: var(--color-text-grey);
    font-weight: 300;
}

/* Счёт по партиям */
.match-header__sets {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap);
    margin-top: var(--gap2);
    padding-top: var(--gap);
    border-top: 1px solid var(--ui-bg-100);
}

.match-sets__label {
    font-size: 0.85rem;
    color: var(--color-text-grey);
}

.match-sets__score {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text);
    background: var(--ui-bg-50);
    padding: 4px 12px;
    border-radius: 4px;
}

/* Табы матча */
.match-tabs {
    background: var(--color-white);
    border-radius: var(--ui-radius);
    overflow: hidden;
    border: 1px solid var(--ui-bg-100);
}

/* Обзор матча */
.match-overview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap2);
}

/* Статистика матча */
.match-stats {
    background: var(--ui-bg-50);
    border-radius: var(--ui-radius);
    padding: var(--gap2);
}

.match-stats__title {
    font-family: var(--wf);
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-primary);
    margin-bottom: var(--gap);
}

.match-stats__list {
    display: flex;
    flex-direction: column;
    gap: var(--gf);
}

.match-stat-row {
    display: grid;
    grid-template-columns: 60px 1fr 60px;
    gap: var(--gap);
    padding: var(--gf) 0;
    border-bottom: 1px solid var(--ui-bg-100);
    align-items: center;
}

.match-stat-row:last-child {
    border-bottom: none;
}

.match-stat-row__home,
.match-stat-row__away {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-primary-dark);
}

.match-stat-row__home {
    text-align: left;
}

.match-stat-row__away {
    text-align: right;
}

.match-stat-row__label {
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-text-grey);
}

/* MVP матча */
.match-mvp {
    background: var(--ui-bg-50);
    border-radius: var(--ui-radius);
    padding: var(--gap2);
}

.match-mvp__title {
    font-family: var(--wf);
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-primary);
    margin-bottom: var(--gap);
}

.match-mvp__grid {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.match-mvp__card {
    background: var(--color-white);
    border-radius: var(--ui-radius);
    padding: var(--gap);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.match-mvp__label {
    font-size: 0.75rem;
    color: var(--color-text-grey);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.match-mvp__name {
    font-family: var(--wf);
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-primary-dark);
}

.match-mvp__team {
    font-size: 0.8rem;
    color: var(--color-text-grey);
}

.match-mvp__stat {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-secondary);
}

/* Составы команд */
.match-rosters {
}

.match-roster {
    background: var(--ui-bg-50);
    border-radius: var(--ui-radius);
    overflow: hidden;
}

.match-roster__header {
    background: var(--color-primary);
    color: var(--color-white);
    padding: var(--gap) var(--gap2);
    font-family: var(--wf);
    font-weight: 700;
    font-size: 1rem;
}

.match-roster__list {
    padding: var(--gap);
}

.match-roster__player {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: var(--gap);
    padding: var(--gf) var(--gap);
    border-bottom: 1px solid var(--ui-bg-100);
    align-items: center;
}

.match-roster__player:last-child {
    border-bottom: none;
}

.match-roster__number {
    font-family: var(--wf);
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-primary);
    text-align: center;
}

.match-roster__name {
    font-weight: 500;
    font-size: 0.9rem;
}

.match-roster__position {
    font-size: 0.8rem;
    color: var(--color-text-grey);
    background: var(--ui-bg-100);
    padding: 2px 8px;
    border-radius: 4px;
}

/* Судьи */
.match-referees {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap);
}

.match-referee {
    background: var(--ui-bg-50);
    border-radius: var(--ui-radius);
    padding: var(--gap2);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.match-referee__role {
    font-size: 0.75rem;
    color: var(--color-text-grey);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.match-referee__name {
    font-family: var(--wf);
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-primary-dark);
}

.match-referee__category {
    font-size: 0.85rem;
    color: var(--color-text-grey);
}

/* Адаптивность страницы матча */
@media (max-width: 768px) {
    .match-header__teams {
        flex-direction: column;
        gap: var(--gap);
    }
    
    .match-team {
        justify-content: center;
        text-align: center;
    }
    
    .match-team--home,
    .match-team--away {
        flex-direction: column;
    }
    
    .match-team__name {
        font-size: 1.1rem;
    }
    
    .match-header__score {
        padding: var(--gap) 0;
    }
    
    .match-score__home,
    .match-score__away {
        font-size: 2.5rem;
    }
    
    .match-overview {
        grid-template-columns: 1fr;
    }
    
    .match-rosters {
        grid-template-columns: 1fr;
    }
    
    .match-referees {
        grid-template-columns: 1fr;
    }
}

/* Адаптивность страницы соревнования */
@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .comp-header {
        flex-direction: column;
    }
    
    .comp-tabs__nav {
        padding: 0;
    }
    
    .comp-tabs__btn {
        padding: var(--gap);
        font-size: 0.8rem;
    }
    
    .venue-info {
        grid-template-columns: 1fr;
    }
    
    .standings-table__header,
    .standings-table__row {
        grid-template-columns: 30px 1fr repeat(3, 40px) 40px;
        font-size: 0.8rem;
    }
    
    .standings-col:nth-child(5),
    .standings-col:nth-child(6) {
        display: none;
    }
    
    .schedule-match {
        grid-template-columns: 70px 1fr 50px;
    }
    
    .schedule-match__teams {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        font-size: 0.85rem;
    }
    
    .schedule-match__vs {
        display: none;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .protocol-item {
        grid-template-columns: 30px 1fr;
    }
    
    .protocol-item__download {
        display: none;
    }
}

/* Адаптивность для календаря */
@media (max-width: 768px) {
    .events-calendar__item {
        grid-template-columns: 100px 1fr;
        grid-template-rows: auto auto;
    }
    
    .events-calendar__location {
        grid-column: 1 / -1;
        text-align: left;
        padding-left: 0;
        padding-top: var(--gap);
        border-top: 1px solid var(--ui-bg-100);
    }
    
    .events-calendar__day {
        font-size: 1.5rem;
    }
    
    .events-calendar__title {
        font-size: 0.9rem;
    }
}

/* ====================================
   Стили для тестовых данных
   ==================================== */

.test-data-notice {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: var(--ui-radius);
    padding: var(--gap);
    margin-bottom: var(--gap);
    color: #856404;
    font-size: 0.9rem;
    line-height: 1.5;
}

.test-badge {
    background: #ffc107;
    color: #000;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
}

h1 .test-badge,
h2 .test-badge,
h3 .test-badge {
    font-size: 0.6em;
    vertical-align: middle;
}