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

 Space 5 ♦ CSS
 [Mensa Template]

*/

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

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

:root {
    /* Fonts 2 */
    --wf: 'Roboto', sans-serif;
    --wf2: 'Montserrat', sans-serif;
    --mns-font: 'IBM Plex Sans', sans-serif;
    --mns-bg: #f3f5f6;

    /* Transitus START */
    /* Theme colors */
    --color-primary: #003CFF;
    --color-primary-light: #1f50ff;
    --color-primary-dark: #0736dc;
    --color-secondary: #05e745;
    --color-secondary-light: #0afc4c;
    --color-secondary-dark: #04cd3d;
    --color-accent: #F7685B;
    --color-accent-light: #fc8076;
    --color-accent-dark: #e75548;
    --color-dark: #192a3e;
    --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.1); /*transparent hover*/
    --trans: all 0.2s; /*transition delay*/

    /* Fonts 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: #fff;
    --ui-input-bg-active: #dee7ff;
    --ui-input-bg-disabled: #EFF2F6;
    --ui-color-primary: #0043ed;
    --ui-color-primary-active: var(--ui-color-primary);
    --ui-color-primary-hover: #1250ef;
    --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(--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); /* not used */
    --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 */
    --header-height: 48px;
    --wid: 1294px; /* 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 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@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;
    }
}
/* new Tokens dec 2025 */
/* Containers */
.df   { display: flex; }
.dif  { display: inline-flex; }
.aic  { align-items: center; }          
.ais  { align-items: stretch; }
.jcc  { justify-content: center; }     
.jcsb { justify-content: space-between; }
.jcsa { justify-content: space-around; }
.jce  { justify-content: flex-end; }
.fldc  { flex-direction: column; }
.fldr  { flex-direction: row; }

/* Child elements */
.fl1   { flex: 1; }                      
.fln   { flex: none; }                   
.flw { flex-wrap: wrap; }
.flss { flex-shrink: 0; }
/* /new Tokens dec 2025 */

/*   (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);
    align-items: start;
}

.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;
}

.sf__line:last-child {
    margin: 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__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%;
}

.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__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 rgba(0, 0, 0, 0.1) solid;
}

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

.header__left {
}

.header-logo {
    display: flex;
    align-items: center;
    gap: var(--gap);
}

.header-logo__img {
    width: 3rem;
}

.header-logo__text {
    font-size: 1.6rem;
}

.header__center {
}

.header__right {
}

/* /Header */

/* MAIN NAV
------- ------- ------- */
.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;
}

.mobnav__icon {

}

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

.menu-icon {
    display: block;
    width: 18px;
    height: 2px;
    transition: all 0.2s;
    background: var(--color-text);
}

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

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

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

.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;
}

.mob-header {
    display: none;
}

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

    .nav ul {
        display: none;
    }

    .main-nav--active ul {
        display: block;
    }

    .main-nav--active li {
        float: none;
        margin: 4px 0 8px 28px;
    }
}

/* /MAIN 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 {
    background: var(--ui-bg-100);
}

.footer {
    color: var(--color-text-grey);
    font-size: var(--size-text-note);
    line-height: 1.4;
    padding: var(--gap) 0;
}

.footer__left {

}

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

.footer__right {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    padding: 8px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: var(--gap);
    filter: grayscale(100%);
    transition: var(--trans);
}

.footer-logo:hover {
    filter: none;

}

.footer-logo__img {
    width: 2rem;
}

.footer-logo__text {
}

.footer__center {
}

.footer__right {
}

/* /Footer */

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

/* Mensa CMS — Video list */

.mns {
    font-family: var(--mns-font);
    background: var(--mns-bg);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

.mns__blur {
    position: absolute;
    top: -238px;
    left: 50%;
    transform: translateX(-50%);
    width: 1093px;
    height: 391px;
    pointer-events: none;
    z-index: 0;
}

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

/* Header */

.mns-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px var(--gap);
    min-width: 0;
}

.mns-header__brand {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

.mns-logo {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: var(--header-height);
    background: var(--color-white);
    border-radius: 24px;
    padding: 8px 16px;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.06));
}

.mns-logo__img {
    display: block;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.mns-mode {
    position: relative;
    z-index: 1;
    margin-left: -40px;
}

.mns-mode__trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--header-height);
    padding: 0 16px 0 48px;
    background: rgba(0, 0, 0, 0.12);
    border: none;
    border-radius: 0 24px 24px 0;
    font-family: var(--mns-font);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text);
    cursor: pointer;
    white-space: nowrap;
}

.mns-mode--open .mns-mode__trigger {
    border-bottom-right-radius: 0;
}

.mns-mode__trigger .spis {
    stroke: var(--color-text);
    flex-shrink: 0;
}

.mns-mode__value {
    min-width: 2.5em;
}

.mns-mode__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 3;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    box-sizing: border-box;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    background: rgba(243, 245, 246, 0.55);
    border: none;
    border-radius: 0 0 28px 28px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    pointer-events: none;
    visibility: hidden;
    transition:
        max-height 0.28s ease,
        opacity 0.2s ease,
        padding 0.28s ease,
        visibility 0.28s;
}

.mns-mode--open .mns-mode__menu {
    max-height: 180px;
    opacity: 1;
    padding: 4px 0 10px;
    pointer-events: auto;
    visibility: visible;
}

.mns-mode__option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 10px 16px 10px 48px;
    border: none;
    border-radius: 0;
    background: transparent;
    font-family: var(--mns-font);
    text-align: left;
    cursor: pointer;
    color: var(--color-text);
}

.mns-mode__option:hover,
.mns-mode__option[aria-selected="true"] {
    background: rgba(0, 0, 0, 0.08);
}

.mns-mode__option-code {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text);
}

.mns-mode__option-desc {
    font-size: 11px;
    font-weight: 400;
    color: var(--color-text-grey);
}

@media (prefers-reduced-motion: reduce) {
    .mns-mode__menu {
        transition: none;
    }
}

.mns-nav {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-left: 16px;
}

a.mns-nav__item {
    font-weight: 600;
    font-size: 27px;
    line-height: 1;
    color: var(--color-text);
    opacity: 0.5;
    transition: opacity 0.2s;
    white-space: nowrap;
}

a.mns-nav__item:hover {
    opacity: 0.75;
    color: var(--color-text);
}

a.mns-nav__item--active {
    opacity: 1;
}

.mns-header__user {
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: right;
    z-index: 3;
}

.mns-user__trigger {
    display: block;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 62px;
    line-height: 0;
}

.mns-user__trigger:focus-visible {
    box-shadow: var(--ui-shadow-focus);
}

.mns-avatar {
    width: var(--header-height);
    height: var(--header-height);
    border-radius: 62px;
    border: 2px solid var(--color-white);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
    object-fit: cover;
    display: block;
}

/* Context menu */

.mns-menu {
    position: fixed;
    z-index: 12000;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-width: 184px;
    max-height: var(--menu-max-height, calc(100vh - 16px));
    padding: 6px;
    margin: 0;
    background: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    box-shadow:
        0 12px 32px rgba(25, 42, 62, 0.12),
        0 2px 8px rgba(25, 42, 62, 0.06);
    font-family: var(--mns-font);
    user-select: none;
}

.mns-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    border: none;
    border-radius: 10px;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-text);
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
}

.mns-menu__item:hover,
.mns-menu__item:focus-visible,
.mns-menu__item--open {
    background: var(--ui-bg-100);
    color: var(--color-text);
}

.mns-menu__item:disabled,
.mns-menu__item[aria-disabled="true"] {
    opacity: 0.4;
    cursor: default;
}

.mns-menu__item:disabled:hover,
.mns-menu__item[aria-disabled="true"]:hover {
    background: transparent;
}

.mns-menu__check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.mns-menu__check .spis {
    width: 16px;
    height: 16px;
    stroke: var(--color-text);
}

.mns-menu__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: var(--color-text-grey);
}

.mns-menu__item:hover .mns-menu__icon,
.mns-menu__item--open .mns-menu__icon {
    stroke: var(--color-text);
}

.mns-menu__label {
    flex: 1 1 auto;
    min-width: 0;
}

.mns-menu__chevron {
    width: 16px;
    height: 16px;
    margin-left: auto;
    flex-shrink: 0;
    stroke: var(--color-text-grey);
}

.mns-menu__item--open .mns-menu__chevron {
    stroke: var(--color-text);
}

.mns-menu--sub::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -16px;
    width: 16px;
}

.mns-menu--sub-start::before {
    left: auto;
    right: -16px;
}

.mns-menu--select {
    min-width: 148px;
}

.mns-menu__list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.mns-menu__preview {
    display: flex;
    align-items: flex-start;
    flex: 0 1 auto;
    gap: 4px;
    max-height: 36%;
    padding: 8px 10px 10px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.mns-menu__preview-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.mns-menu__preview .mns-tag {
    pointer-events: none;
    cursor: default;
}

.mns-menu__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-left: auto;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}

.mns-menu__clear:hover,
.mns-menu__clear:focus-visible {
    background: var(--ui-bg-100);
}

.mns-menu__clear .spis {
    width: 14px;
    height: 14px;
    stroke: var(--color-text-grey);
}

.mns-menu__clear:hover .spis,
.mns-menu__clear:focus-visible .spis {
    stroke: var(--color-text);
}

.mns-menu__clear[hidden] {
    display: none;
}

.mns-menu__sep {
    flex-shrink: 0;
    height: 1px;
    margin: 0 6px 6px;
    background: rgba(0, 0, 0, 0.08);
}

/* Main card */

.mns-main {
    position: relative;
    z-index: 1;
    padding: 0 var(--gap) var(--gap);
}

.mns-card {
    background: var(--color-white);
    border-radius: 16px;
    min-height: 496px;
    padding: 12px 11px;
}

.mns-card--split,
.mns-card--structure {
    display: flex;
    align-items: stretch;
    min-height: 722px;
    padding: 0;
    overflow: hidden;
}

/* TPL aside (shared: structure / templates) */

.mns-aside {
    --mns-aside-width: 200px;
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--mns-aside-width);
    width: var(--mns-aside-width);
    min-width: 0;
    min-height: 0;
    border-right: 1px solid #d6d6d6;
    border-radius: 16px 0 0 16px;
    overflow: hidden;
}

.mns-aside__scroll {
    flex: 1 1 auto;
    min-height: 0;
    padding: 8px 0;
    overflow: auto;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.28) transparent;
}

.mns-aside--overflow-start::before,
.mns-aside--overflow-end::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 20px;
    pointer-events: none;
}

.mns-aside--overflow-start::before {
    left: 0;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: inherit;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.06), transparent);
}

.mns-aside--overflow-end::after {
    right: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.06), transparent);
}

.mns-aside__scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.mns-aside__scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.22);
    border-radius: 8px;
}

.mns-aside__scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.36);
}

.mns-aside__scroll::-webkit-scrollbar-track,
.mns-aside__scroll::-webkit-scrollbar-corner {
    background: transparent;
}

.mns-aside__resizer {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
}

.mns-aside__resizer::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: transparent;
}

.mns-aside__resizer:hover::after,
.mns-aside__resizer--active::after {
    background: var(--color-primary);
}

body.mns-aside-resizing {
    cursor: col-resize;
    user-select: none;
}

.mns-aside__section {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: max-content;
    padding: 0 8px;
}

.mns-aside__section + .mns-aside__section {
    margin-top: 24px;
}

.mns-aside__section-head {
    display: flex;
    align-items: center;
    align-self: flex-start;
    gap: 4px;
    width: max-content;
    margin: 0 0 6px;
    padding: 0 7px;
    border: none;
    background: transparent;
    font: inherit;
    text-align: left;
    color: var(--color-text);
    cursor: pointer;
}

.mns-aside__section--closed > .mns-aside__nav,
.mns-aside__section--closed > .mns-aside__add {
    display: none;
}

.mns-aside__section-title {
    margin: 0;
    font-family: var(--mns-font);
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-text);
}

.mns-aside__section-head .mns-aside__chevron {
    stroke: var(--color-text-grey);
}

.mns-aside__nav {
    display: flex;
    flex-direction: column;
}

.mns-aside__tree {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mns-aside__node {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mns-aside__tree .mns-aside__tree {
    padding-left: 24px;
}

.mns-aside__node--closed > .mns-aside__tree {
    display: none;
}

.mns-aside__row {
    display: flex;
    align-items: center;
    gap: 2px;
    width: max-content;
    min-height: 34px;
    padding-right: 4px;
    border-radius: var(--ui-radius);
}

.mns-aside__row:hover,
.mns-aside__row:focus-within,
.mns-aside__row:has(.mns-aside__item--active) {
    background: var(--ui-bg-100);
}

.mns-aside__item,
a.mns-aside__item:link,
a.mns-aside__item:visited,
a.mns-aside__item:active {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 8px;
    flex: 0 0 auto;
    width: auto;
    min-height: 34px;
    padding: 8px 15px;
    border: none;
    border-radius: 0;
    background: transparent;
    font-family: var(--mns-font);
    font-size: 12px;
    line-height: normal;
    color: var(--color-text-grey);
    text-align: left;
    cursor: pointer;
}

.mns-aside__row .mns-aside__item,
.mns-aside__row a.mns-aside__item:link,
.mns-aside__row a.mns-aside__item:visited,
.mns-aside__row a.mns-aside__item:active {
    padding-right: 6px;
}

.mns-aside__item > span:first-of-type {
    flex-shrink: 0;
    white-space: nowrap;
}

.mns-aside__item .spis {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: currentColor;
}

.mns-aside__action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: var(--ui-radius);
    background: transparent;
    color: var(--color-text-grey);
    cursor: pointer;
    flex-shrink: 0;
}

.mns-aside__action:hover {
    color: var(--color-text);
}

.mns-aside__action .spis,
.mns-aside__section-head .mns-aside__chevron {
    width: 12px;
    height: 12px;
}

.mns-aside__action .spis {
    stroke: currentColor;
}

.mns-aside__section-head .mns-aside__chevron,
.mns-aside__toggle .mns-aside__chevron {
    transition: transform 0.16s ease;
}

.mns-aside__section-head[aria-expanded="false"] .mns-aside__chevron,
.mns-aside__toggle[aria-expanded="false"] .mns-aside__chevron {
    transform: rotate(-90deg);
}

.mns-aside__item:hover,
a.mns-aside__item:hover,
.mns-aside__item--active,
.mns-aside__row:hover .mns-aside__item,
.mns-aside__row:focus-within .mns-aside__item {
    color: var(--color-text);
}

.mns-aside__add {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    margin: 4px 0 0 5px;
    padding: 3px 10px;
    border: none;
    border-radius: var(--ui-radius);
    background: transparent;
    font-family: var(--mns-font);
    font-size: 12px;
    color: var(--color-text-grey);
    cursor: pointer;
}

.mns-aside__add .spif {
    width: 18px;
    height: 18px;
    fill: var(--color-text-light-grey);
}

.mns-aside__add:hover {
    color: var(--color-text);
}

.mns-aside__add:hover .spif {
    fill: var(--color-text);
}

/* Structure editor */

.mns-editor {
    flex: 1;
    min-width: 0;
    padding: var(--gap);
    display: flex;
    flex-direction: column;
    gap: var(--gf);
}

.mns-editor__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: var(--gf);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

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

.mns-editor__field {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-height: 36px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: var(--gf);
}
.mns-editor__field--head {
    border-bottom: none;
    padding-bottom: 0;
}
.mns-editor__field--top {
    align-items: flex-start;
    flex: 1;
    min-height: 0;
}

.mns-editor__field--top .mns-editor__label {
    padding-top: 8px;
}

.mns-editor__field--name {
    flex: 1;
    min-width: 0;
}

.mns-editor__label {
    flex: 0 0 90px;
    width: 116px;
    font-family: var(--mns-font);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text);
    padding: var(--gf) 0 0 0;
}

.mns-editor__control {
    flex: 1;
    min-width: 0;
}

.mns-editor__field .sf__input,
.mns-editor__field .sf__select {
    width: 200px;
    max-width: 100%;
}

.mns-editor__input--wide {
    width: 100% !important;
    max-width: 607px;
}

.mns-editor__modules {
    width: 100%;
    max-width: none;
    height: 280px;
    min-height: 160px;
}

.mns-editor__url {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    font-family: var(--wf);
    font-size: 14px;
    color: var(--color-text-grey);
}

.mns-editor__url .spis {
    width: 16px;
    height: 16px;
    stroke: var(--color-text-grey);
}

.mns-editor__divider {
    width: 100%;
    margin: 6px 0;
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.mns-editor__type-switch .mns-editor__control {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mns-editor__types {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.mns-editor__type-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border-radius: var(--ui-radius);
    background: var(--ui-bg-100);
}

.mns-editor__type-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mns-editor__type-panel[hidden] {
    display: none;
}

.mns-editor__type-body .mns-addbar {
    margin-top: 0;
    padding: 0;
    background: transparent;
}

.mns-editor__section-title {
    margin: 0;
    font-family: var(--mns-font);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text-heading);
}

.mns-mini-card {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--ui-size);
    padding: 5px 16px 6px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--ui-radius);
    background: var(--color-white);
    font-family: var(--mns-font);
    font-size: 16px;
    line-height: normal;
    color: var(--color-text);
    cursor: pointer;
    white-space: nowrap;
}

.mns-mini-card .spis {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    stroke: currentColor;
}

.mns-mini-card:hover {
    border-color: var(--ui-color-border-hover);
}

.mns-mini-card--active,
.mns-editor__types .mns-mini-card:has(:checked) {
    border-color: var(--ui-color-border-active);
    color: var(--ui-color-primary);
}

.mns-editor__types .mns-mini-card:focus-within {
    outline: 2px solid var(--ui-color-border-active);
    outline-offset: 2px;
}

/* Глобальные radio 21×21 перекрывают .visuallyhidden — убираем из потока */
.mns-editor__types .mns-mini-card > input[type=radio] {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    box-shadow: none;
}

.mns-editor__types .mns-mini-card > input[type=radio]:after {
    content: none;
    display: none;
}

.mns-editor__blocks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.mns-block {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 10px;
    min-height: 82px;
    padding: 5px 0 5px 5px;
    border: 1px solid var(--ui-color-border);
    border-radius: var(--ui-radius);
    background: transparent;
    overflow: hidden;
}

.mns-block:not(.mns-block--placeholder)::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--color-white);
    border-radius: inherit;
    pointer-events: none;
}

.mns-block > * {
    position: relative;
    z-index: 1;
}

.mns-block--lifted {
    overflow: visible;
    border-color: var(--ui-color-border-active);
    box-shadow: var(--ui-shadow-focus);
}

.mns-block__rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 28px;
    width: 28px;
    padding: 4px 0 8px;
    border-radius: 5px;
    background: var(--ui-bg-100);
    cursor: grab;
    transition: background 0.16s ease;
    touch-action: none;
}

.mns-block__rail:hover {
    background: var(--ui-bg-300);
}

.mns-block__rail:hover .mns-block__reorder img {
    filter: brightness(0.72);
}

.mns-block__rail:active {
    cursor: grabbing;
    background: #c8c8c8;
}

.mns-block--dragging {
    display: none !important;
}

.mns-block--placeholder {
    display: block;
    box-sizing: border-box;
    min-height: 82px;
    padding: 0;
    border: 1px dashed var(--ui-color-border);
    border-radius: var(--ui-radius);
    background: transparent;
    pointer-events: none;
}

.mns-block--placeholder::before {
    display: none;
}

.mns-block--ghost {
    box-sizing: border-box;
    margin: 0;
    overflow: hidden;
    border-radius: var(--ui-radius);
    border: 1px solid var(--ui-color-border-active);
    box-shadow: var(--ui-shadow-focus);
    pointer-events: none;
}

.mns-block--ghost.mns-block--lifted {
    overflow: hidden;
}

body.mns-blocks-sorting {
    cursor: grabbing;
    user-select: none;
}

body.mns-blocks-sorting * {
    cursor: grabbing !important;
    user-select: none !important;
}

.mns-block__type {
    width: 24px;
    height: 24px;
    stroke: var(--color-text);
    pointer-events: none;
}

.mns-block__reorder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: inherit;
    pointer-events: none;
}

.mns-block__reorder img {
    display: block;
    width: 12px;
    height: 24px;
    transition: filter 0.16s ease;
}

.mns-block__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 2px 4px 6px 0;
}

.mns-block__top {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 36px;
}

.mns-block__title {
    font-family: var(--mns-font);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text-grey);
}

.mns-block__required {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-family: var(--wf);
    font-size: 10px;
    color: var(--color-text);
    cursor: pointer;
}

.mns-block__required input[type=checkbox] {
    width: 14px;
    height: 14px;
    border-radius: 4px;
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    .mns-block__required input[type=checkbox]:not(.sp-switch) {
        width: 14px;
        height: 14px;
    }

    .mns-block__required input[type=checkbox]:not(.sp-switch):after {
        width: 4px;
        height: 7px;
        left: 4px;
        top: 1px;
    }
}

.mns-block__remove {
    margin-left: auto;
    color: var(--color-text-grey);
}

.mns-block__fields {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 4px;
}

.mns-block__fields .sf__input {
    width: 200px;
    flex: 0 0 200px;
}

.mns-block__fields .mns-block__field--wide {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
}

.mns-addbar {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 8px;
    padding: 12px 16px;
    background: var(--ui-bg-100);
    border-radius: var(--ui-radius);
}

.mns-addbar__label {
    flex-shrink: 0;
    padding-top: 8px;
    font-family: var(--mns-font);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text-grey);
}

.mns-addbar__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Toolbar */

.mns-toolbar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 0 10px;
}

.mns-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.mns-toolbar__selection {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-left: 8px;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.mns-toolbar__selection[hidden] {
    display: none;
}

.mns-toolbar__count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: var(--ui-radius);
    background: var(--ui-bg-300);
    font-family: var(--mns-font);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--color-text);
}

.mns-toolbar__code,
.mns-toolbar__more {
    margin-left: auto;
}

.mns-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: var(--ui-radius);
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.mns-btn--primary {
    background: var(--color-primary);
    color: var(--color-white);
}

.mns-btn--primary:hover {
    background: var(--color-primary-light);
}

.mns-btn--primary .spis {
    stroke: var(--color-white);
}

.mns-btn--grey {
    background: var(--ui-bg-300);
    color: var(--color-text-grey);
}

.mns-btn--grey:hover {
    background: var(--ui-bg-200);
    color: var(--color-text);
}

.mns-btn--grey:hover .spis {
    stroke: var(--color-text);
}

.mns-btn svg {
    display: block;
}

/* Table */

.mns-table {
    --table-line: #ededed;
    --table-cols: 44px minmax(160px, 1.6fr) 90px minmax(90px, 1fr) minmax(100px, 1fr) 1fr 1fr;

    display: flex;
    flex-direction: column;
    border: 1px solid var(--table-line);
    border-radius: 8px;
    overflow: auto;
    background: var(--color-white);
}

.mns-table[data-mns-table] {
    --table-cols: 64px minmax(160px, 1.8fr) minmax(180px, 1.3fr) minmax(96px, 1fr) minmax(110px, 1.2fr) minmax(128px, 1fr) minmax(128px, 1fr);
    --table-pin-left: 64px;
}

.mns-table__head,
.mns-table__row {
    display: grid;
    grid-template-columns: var(--table-cols);
    align-items: stretch;
    min-width: var(--table-min-width, 860px);
}

.mns-table__head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f9f9f9;
    border-bottom: 1px solid var(--table-line);
}

.mns-table__head .mns-table__cell {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 12px;
    color: var(--color-text-light-grey);
}

.mns-table__head .mns-table__cell:not(.mns-table__cell--select) {
    gap: 4px;
}

.mns-table__head .mns-table__cell:not([data-col-locked]) {
    cursor: pointer;
    touch-action: none;
}

.mns-table__head .mns-table__cell:not([data-col-locked]):active {
    cursor: grabbing;
}

.mns-table__resizer {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
}

.mns-table__resizer::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: transparent;
}

.mns-table__resizer:hover::after,
.mns-table__resizer--active::after {
    background: var(--color-primary);
}

.mns-table__h {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mns-table__sort {
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 4px solid var(--color-text-light-grey);
    flex-shrink: 0;
}

.mns-table__sort--desc {
    border-bottom: none;
    border-top: 4px solid var(--color-text-light-grey);
}

.mns-table__cell[data-col-hidden] {
    display: none !important;
}

.mns-table__body {
    display: flex;
    flex-direction: column;
}

.mns-table__row {
    background: var(--color-white);
    border-bottom: 1px solid var(--table-line);
}

.mns-table__row:hover {
    background: var(--color-bg);
}

.mns-table__body .mns-table__row:has(.mns-table__cell--select input:checked) {
    background: rgba(0, 60, 255, 0.08);
}

.mns-table__row:last-child {
    border-bottom: none;
}

.mns-table__cell {
    position: relative;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    padding: 12px;
    border-right: 1px solid var(--table-line);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.mns-table__cell:last-child {
    border-right: none;
}

.mns-table__cell--select {
    gap: 8px;
    align-items: flex-start;
    justify-content: flex-start;
    padding-left: 8px;
    padding-right: 8px;
    overflow: visible;
    text-overflow: unset;
}

.mns-table__body .mns-table__cell--select input[type="checkbox"] {
    margin-top: 6px;
    flex-shrink: 0;
}

.mns-table__cell:has(.mns-tag),
.mns-table__cell:has(.mns-tag-select) {
    overflow: visible;
    text-overflow: unset;
}

.mns-table__handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: grab;
    flex-shrink: 0;
    touch-action: none;
}

.mns-table__handle .spis {
    width: 16px;
    height: 16px;
    stroke: var(--color-text-light-grey);
}

.mns-table__handle:hover .spis {
    stroke: var(--color-text);
}

.mns-table__handle:active {
    cursor: grabbing;
}

.mns-table__handle--spacer {
    pointer-events: none;
    visibility: hidden;
}

.mns-table__cell--title,
.mns-table__cell--muted,
.mns-table__cell--date {
    line-height: 1.35;
    padding-top: 14px;
    padding-bottom: 14px;
}

.mns-table__cell--muted,
.mns-table__cell--date {
    display: block;
}

.mns-table__cell--title {
    display: flex;
    align-items: flex-start;
    font-weight: 600;
    color: var(--color-text);
}

.mns-table__title {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mns-table__edit {
    position: absolute;
    top: 10px;
    right: 8px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--table-line);
    border-radius: var(--ui-radius);
    background: var(--color-white);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--ui-trans), border-color var(--ui-trans);
}

.mns-table__row:hover .mns-table__edit,
.mns-table__cell--title:focus-within .mns-table__edit {
    opacity: 1;
}

.mns-table__edit .spis {
    stroke: var(--color-text-grey);
}

.mns-table__edit:hover {
    border-color: var(--ui-color-border-hover);
}

.mns-table__edit:hover .spis {
    stroke: var(--color-text);
}

.mns-table__row--ghost .mns-table__edit,
body.mns-table-dragging .mns-table__edit {
    display: none;
}

.mns-table__cell--pin {
    position: sticky;
    left: var(--table-pin-left, 64px);
    z-index: 1;
    background: var(--color-white);
}

.mns-table__cell--pin-start {
    left: 0;
    z-index: 2;
}

.mns-table__head .mns-table__cell--pin {
    z-index: 3;
    background: #f9f9f9;
}

.mns-table__head .mns-table__cell--pin-start {
    z-index: 4;
}

.mns-table__row:hover .mns-table__cell--pin {
    background: var(--color-bg);
}

.mns-table__body .mns-table__row:has(.mns-table__cell--select input:checked) .mns-table__cell--pin {
    background: rgba(0, 60, 255, 0.08);
}

.mns-table__cell--muted,
.mns-table__cell--date {
    color: var(--color-text-grey);
}

.mns-table__cell--muted-strong {
    font-weight: 600;
}

.mns-table input[type=checkbox] {
    width: 12px;
    height: 12px;
    border-radius: 4px;
}

.mns-table input[type=checkbox]:not(.sp-switch):after {
    width: 3px;
    height: 6px;
    left: 3px;
    top: 1px;
}

.mns-table__row--dragging {
    display: none !important;
}

.mns-table__row--placeholder {
    display: block;
    box-sizing: border-box;
    min-width: 0;
    background: rgba(0, 60, 255, 0.04);
    border-bottom: 1px solid var(--table-line);
    pointer-events: none;
}

.mns-table__row--ghost,
.mns-table__cell--ghost {
    box-sizing: border-box;
    background: var(--color-white);
    border: 1px solid var(--ui-color-border-active);
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    opacity: 0.96;
}

.mns-table__row--ghost {
    min-width: 0;
    overflow: hidden;
    --table-line: #ededed;
}

.mns-table__cell--dragging {
    opacity: 0.38;
}

.mns-table__cell--drop-before {
    box-shadow: inset 2px 0 0 var(--color-primary);
}

.mns-table__cell--drop-after {
    box-shadow: inset -2px 0 0 var(--color-primary);
}

.mns-table__cell--ghost {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 12px;
    color: var(--color-text-light-grey);
}

.mns-table__row--ghost .mns-table__resizer,
.mns-table__cell--ghost .mns-table__resizer {
    display: none;
}

body.mns-table-dragging,
body.mns-table-dragging .mns-table__head .mns-table__cell,
body.mns-table-dragging .mns-table__handle {
    cursor: grabbing;
    user-select: none;
}

body.mns-table-resizing,
body.mns-table-resizing .mns-table__cell,
body.mns-table-resizing .mns-table__resizer {
    cursor: col-resize;
    user-select: none;
}

/* Content editor window */

.mns-win {
    --mns-win-label: 160px;
    position: fixed;
    inset: 0;
    z-index: 13000;
    pointer-events: none;
    visibility: hidden;
}

.mns-win--open,
.mns-win--closing {
    visibility: visible;
}

.mns-win--open {
    pointer-events: auto;
}

.mns-win__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(25, 42, 62, 0.28);
    opacity: 0;
    transition: opacity 0.24s ease;
}

.mns-win--open .mns-win__backdrop {
    opacity: 1;
}

.mns-win__panel {
    --mns-win-side: max(0px, calc((100% - min(100%, var(--wid))) / 2));
    position: absolute;
    top: 0;
    right: var(--mns-win-side);
    display: flex;
    flex-direction: column;
    width: calc(100% * 2 / 3);
    max-width: calc(100% - var(--mns-win-side));
    height: 100%;
    background: var(--color-white);
    box-shadow: var(--sp-shadow-xl);
    transform: translateX(100%);
    transition: transform 0.28s ease;
    outline: none;
}

.mns-win--open .mns-win__panel {
    transform: translateX(0);
}

.mns-win__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
    padding: var(--gap);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.mns-win__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: var(--ui-radius);
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.mns-win__close .spis {
    width: 16px;
    height: 16px;
    stroke: var(--color-text-grey);
}

.mns-win__close:hover {
    background: var(--thover);
}

.mns-win__close:hover .spis {
    stroke: var(--color-text);
}

.mns-win__body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    margin: 0;
    padding: var(--gap);
}

.mns-win__field {
    display: grid;
    grid-template-columns: var(--mns-win-label) minmax(0, 1fr);
    gap: var(--gap);
    align-items: start;
    min-height: var(--ui-size);
    padding-bottom: var(--gf);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.mns-win__field:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mns-win__field + .mns-win__field {
    padding-top: var(--gf);
}

.mns-win__label {
    padding-top: 8px;
    font-family: var(--mns-font);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.35;
    color: var(--color-text);
}

.mns-win__control {
    min-width: 0;
}

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

body.mns-win-open {
    overflow: hidden;
}

@media screen and (max-width: 1100px) {
    .mns-win {
        --mns-win-label: 140px;
    }
}

@media screen and (max-width: 768px) {
    .mns-win__panel {
        --mns-win-side: 0px;
        width: 100%;
    }

    .mns-win__field {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .mns-win__label {
        padding-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mns-win__backdrop,
    .mns-win__panel {
        transition: none;
    }
}

/* Status tag */

.mns-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: auto;
    padding: 2px 8px;
    border-radius: 14px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    white-space: nowrap;
    border: none;
    cursor: pointer;
}

.mns-tag--online,
.mns-tag--offline {
    background: rgba(46, 212, 122, 0.16);
    color: var(--color-green);
}

.mns-tag--draft {
    background: rgba(16, 74, 224, 0.16);
    color: var(--color-blue);
}

.mns-tag--review {
    background: rgba(255, 185, 70, 0.22);
    color: #b7780c;
}

.mns-tag--archive {
    background: rgba(25, 42, 62, 0.08);
    color: var(--color-text-grey);
}

.mns-tag--news {
    background: rgba(247, 104, 91, 0.16);
    color: var(--color-red);
}

.mns-tag--science {
    background: rgba(136, 90, 248, 0.16);
    color: var(--color-purple);
}

.mns-tag--empty {
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-text-grey);
}

.mns-tag .spis {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.mns-tag--draft .spis {
    stroke: var(--color-blue);
}

.mns-tag--review .spis {
    stroke: #b7780c;
}

.mns-tag--archive .spis,
.mns-tag--empty .spis {
    stroke: var(--color-text-grey);
}

.mns-tag--news .spis {
    stroke: var(--color-red);
}

.mns-tag--science .spis {
    stroke: var(--color-purple);
}

.mns-tag--online .spis,
.mns-tag--offline .spis {
    stroke: var(--color-green);
}

.mns-tag-select {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.mns-tag-select .mns-tag {
    pointer-events: none;
}

.mns-tag-select > .spis {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    stroke: var(--color-text-light-grey);
}

@media screen and (max-width: 1100px) {
    a.mns-nav__item {
        font-size: 20px;
    }
}

/* =========================== MEDIA ====================================== */
@media screen and (max-width: 768px) {
    .mns-header {
        --header-height: 36px;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        padding: 8px var(--gap);
    }

    .mns-logo {
        width: 54px;
        padding: 4px 12px;
        border-radius: 18px;
    }

    .mns-logo__img {
        width: 28px;
        height: 28px;
    }

    .mns-mode {
        margin-left: -30px;
    }

    .mns-mode__trigger {
        gap: 4px;
        padding: 0 12px 0 36px;
        border-radius: 0 18px 18px 0;
        font-size: 13px;
    }

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

    .mns-mode__menu {
        border-radius: 0 0 18px 18px;
    }

    .mns-mode__option {
        padding: 8px 12px 8px 36px;
    }

    .mns-mode__option-code {
        font-size: 13px;
    }

    .mns-nav {
        order: 3;
        width: 100%;
        margin-left: 0;
        column-gap: var(--gap);
        row-gap: var(--gf);
        flex-wrap: wrap;
        padding: 4px 0 6px 0;
    }

    a.mns-nav__item {
        font-size: 18px;
    }

    .mns__blur {
        width: 100%;
        top: -120px;
    }

    .mns-card--split,
    .mns-card--structure {
        flex-direction: column;
        min-height: 0;
    }

    .mns-aside {
        flex: none;
        width: 100%;
        max-height: 40vh;
        max-height: min(40dvh, 20rem);
        border-right: none;
        border-bottom: 1px solid #d6d6d6;
        border-radius: 16px 16px 0 0;
    }

    .mns-aside__row,
    .mns-aside__item,
    a.mns-aside__item:link,
    a.mns-aside__item:visited,
    a.mns-aside__item:active {
        min-height: 44px;
    }

    .mns-aside__tree .mns-aside__tree {
        padding-left: 16px;
    }

    .mns-aside__scroll {
        overscroll-behavior: contain;
    }

    .mns-aside__resizer {
        display: none;
    }

    .mns-editor {
        padding: 16px;
    }

    .mns-editor__head {
        flex-direction: column;
        align-items: stretch;
    }

    .mns-editor__actions {
        flex-wrap: wrap;
    }

    .mns-editor__field {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .mns-editor__label {
        flex: none;
        width: auto;
    }

    .mns-editor__field .sf__input,
    .mns-editor__field .sf__select,
    .mns-editor__input--wide,
    .mns-editor__modules {
        width: 100% !important;
        max-width: none;
    }

    .mns-addbar {
        flex-direction: column;
        gap: 10px;
    }

    .mns-block {
        flex-wrap: wrap;
    }

    .mns-block__fields {
        flex-direction: column;
        align-items: stretch;
    }

    .mns-block__fields .sf__input,
    .mns-block__fields .mns-block__field--wide {
        width: 100%;
        flex: none;
    }
}

/* Auth (login / register / recover) */

.mns--auth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 32px 20px;
    overflow: hidden;
}

.mns-auth-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(0, 60, 255, 0.18), transparent 55%),
        linear-gradient(165deg, #eef1f6 0%, #f3f5f6 42%, #e8edf5 100%);
}

.mns-auth-bg__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(72px);
    will-change: transform;
    opacity: 0.72;
}

.mns-auth-bg__orb--a {
    width: min(62vw, 720px);
    height: min(62vw, 720px);
    top: -18%;
    left: -12%;
    background: #003CFF;
    animation: mns-auth-drift-a 18s ease-in-out infinite alternate;
}

.mns-auth-bg__orb--b {
    width: min(48vw, 560px);
    height: min(48vw, 560px);
    right: -10%;
    bottom: -8%;
    background: #1f50ff;
    opacity: 0.55;
    animation: mns-auth-drift-b 22s ease-in-out infinite alternate;
}

.mns-auth-bg__orb--c {
    width: min(36vw, 420px);
    height: min(36vw, 420px);
    left: 42%;
    top: 58%;
    background: #05e745;
    opacity: 0.28;
    animation: mns-auth-drift-c 26s ease-in-out infinite alternate;
}

.mns-auth-bg__mesh {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.45) 0%, transparent 28%),
        radial-gradient(circle at 78% 22%, rgba(255, 255, 255, 0.28) 0%, transparent 24%),
        radial-gradient(circle at 60% 75%, rgba(243, 245, 246, 0.7) 0%, transparent 32%);
    animation: mns-auth-mesh 20s ease-in-out infinite alternate;
    mix-blend-mode: soft-light;
}

.mns-auth {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 380px;
    animation: mns-auth-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mns-auth__panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px 24px 22px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: calc(var(--ui-radius) * 2);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 40px rgba(25, 42, 62, 0.08);
}

.mns-auth__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.mns-auth__logo {
    display: block;
    width: 56px;
    height: auto;
    flex-shrink: 0;
}

.mns-auth__title {
    margin: 0;
    font-family: var(--mns-font);
    font-weight: 600;
    font-size: 28px;
    line-height: 1;
    color: var(--color-text);
}

.mns-auth__lead {
    margin: 0;
    text-align: center;
    font-family: var(--mns-font);
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-text-grey);
}

.mns-auth__form .btn {
    width: 100%;
}

.mns-auth__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
    font-family: var(--mns-font);
    font-size: 13px;
}

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

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

@keyframes mns-auth-drift-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(14%, 10%, 0) scale(1.12); }
}

@keyframes mns-auth-drift-b {
    from { transform: translate3d(0, 0, 0) scale(1.05); }
    to { transform: translate3d(-16%, -12%, 0) scale(1); }
}

@keyframes mns-auth-drift-c {
    from { transform: translate3d(0, 0, 0) scale(0.92); }
    to { transform: translate3d(-10%, 14%, 0) scale(1.18); }
}

@keyframes mns-auth-mesh {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-3%, 2%, 0) scale(1.06); }
}

@keyframes mns-auth-rise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 480px) {
    .mns-auth__panel {
        padding: 24px 18px 18px;
    }

    .mns-auth__title {
        font-size: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mns-auth-bg__orb,
    .mns-auth-bg__mesh,
    .mns-auth {
        animation: none;
    }
}