@import url(https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;700&display=swap);

* {
    box-sizing: border-box;
    position: relative;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

body {
    height: 100%;
    min-height: 100%;
    font-family: "Exo 2", sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 18px;
    color: #000;
    background: #000;
    margin: 0;
    padding: 0;
    min-width: 980px;
    display: flex;
    flex-direction: column;
}

button, input, textarea {
    font-family: "Exo 2", sans-serif;
    outline: none;
}

input, textarea {
    font-size: 18px;
    width: 100%;
}

a {
    text-decoration: none;
}

/* ===== PAGE LOGIN ===== */
.page.page--login {
    flex: 1 1;
    width: 100%;
    background: #000 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAhGVYSWZNTQAqAAAACAAFARIAAwAAAAEAAQAAARoABQAAAAEAAABKARsABQAAAAEAAABSASgAAwAAAAEAAgAAh2kABAAAAAEAAABaAAAAAAAAAEgAAAABAAAASAAAAAEAA6ABAAMAAAABAAEAAKACAAQAAAABAAAABqADAAQAAAABAAAABgAAAACYqlCmAAAACXBIWXMAAAsTAAALEwEAmpwYAAABWWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNi4wLjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgoZXuEHAAAAH0lEQVQIHWNgQAL///+XBGGQEBOSOJFMZO3IWkg3CgDypAxdCM+OUQAAAABJRU5ErkJggg==");
    flex: 1 1;
    display: flex;
    align-items: center;
    justify-items: center;
    overflow: hidden;
}

/* ===== MOTION CONTAINERS ===== */
.page--login .motion-container,
.page-layout .motion-container {
    position: absolute;
    z-index: 0;
}

.page--login .svg-web-mot,
.page-layout .svg-web-mot {
    width: 300pt;
    height: 300pt;
}

.page--login .svg-circle-mot,
.page-layout .svg-circle-mot {
    width: 200pt;
    height: 200pt;
}

.page--login .svg-circle-mot.position-default,
.page-layout .svg-circle-mot.position-default {
    left: -120pt;
    top: calc(100% - 360pt);
}

.page--login .svg-web-mot.position-default,
.page-layout .svg-web-mot.position-default {
    left: calc(100% - 330pt);
    top: -120pt;
}

/* ===== SVG STROKES ===== */
.stroked {
    fill: none;
    stroke: #242424;
    stroke-width: 1px;
}

svg.d-colorise-element.style-darked .stroked,
svg.d-colorise-element.style-darked line,
svg.d-colorise-element.style-darked path {
    stroke: #242424;
}

svg.d-colorise-element.style-darked path {
    fill: none;
}

.svg-circle-mot svg .stroked {
    transform: matrix(0, 1, -1, 0, 270.994, 163.006);
}

/* ===== ANIMATED ELEMENTS ===== */
.svg-animate {
    will-change: transform;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.motion-container.e {
    --diration: 19s;
}

.motion-container.e .login-animated-orbit-a {
    animation: login-animated-circle-a-animate-reverse var(--diration) linear infinite;
}

.motion-container.e .login-animated-orbit-b {
    animation: login-animated-circle-b-animate calc(var(--diration) - 8s) linear infinite;
}

.motion-container.e .login-animated-orbit-c {
    animation: login-animated-circle-c-animate-reverse calc(var(--diration) - 11s) linear infinite;
}

.motion-container.b {
    --diration: 16s;
}

.motion-container.b .login-animated-web-a {
    animation: login-animated-web-a-animate-reverse var(--diration) linear infinite;
}

.motion-container.b .login-animated-web-b {
    animation: login-animated-web-b-animate calc(var(--diration) - 5s) linear infinite;
}

.motion-container.b .login-animated-web-c {
    animation: login-animated-web-c-animate-reverse calc(var(--diration) - 8s) linear infinite;
}

.motion-container.b .login-animated-web-d {
    animation: login-animated-web-d-animate calc(var(--diration) - 12s) linear infinite;
}

/* ===== KEYFRAMES - CIRCLE ORBIT ===== */
@keyframes login-animated-circle-a-animate {
    0% { transform: translate(53.9995px, 217px) rotate(180deg) translateX(216.5px); }
    100% { transform: translate(53.9995px, 217px) rotate(540deg) translateX(216.5px); }
}

@keyframes login-animated-circle-a-animate-reverse {
    0% { transform: translate(53.9995px, 217px) rotate(540deg) translateX(216.5px); }
    100% { transform: translate(53.9995px, 217px) rotate(180deg) translateX(216.5px); }
}

@keyframes login-animated-circle-b-animate {
    0% { transform: translate(53.9995px, 217px) rotate(0deg) translateX(124.74px); }
    100% { transform: translate(53.9995px, 217px) rotate(1turn) translateX(124.74px); }
}

@keyframes login-animated-circle-b-animate-reverse {
    0% { transform: translate(53.9995px, 217px) rotate(1turn) translateX(124.74px); }
    100% { transform: translate(53.9995px, 217px) rotate(0deg) translateX(124.74px); }
}

@keyframes login-animated-circle-c-animate {
    0% { transform: translate(53.9995px, 217px) rotate(180deg) translateX(67.7px); }
    100% { transform: translate(53.9995px, 217px) rotate(540deg) translateX(67.7px); }
}

@keyframes login-animated-circle-c-animate-reverse {
    0% { transform: translate(53.9995px, 217px) rotate(540deg) translateX(67.7px); }
    100% { transform: translate(53.9995px, 217px) rotate(180deg) translateX(67.7px); }
}

/* ===== KEYFRAMES - WEB ORBIT ===== */
@keyframes login-animated-web-a-animate {
    0.00% { transform: translate(174.071px, -136.612px); }
    14.29% { transform: translate(368.821px, -154.907px); }
    28.57% { transform: translate(504.549px, -14.0527px); }
    42.86% { transform: translate(479.049px, 179.885px); }
    57.14% { transform: translate(311.524px, 280.867px); }
    71.43% { transform: translate(128.123px, 212.852px); }
    85.71% { transform: translate(66.9508px, 27.0563px); }
    100.00% { transform: translate(174.071px, -136.612px); }
}

@keyframes login-animated-web-a-animate-reverse {
    0.00% { transform: translate(174.071px, -136.612px); }
    14.29% { transform: translate(66.9508px, 27.0563px); }
    28.57% { transform: translate(128.123px, 212.852px); }
    42.86% { transform: translate(311.524px, 280.867px); }
    57.14% { transform: translate(479.049px, 179.885px); }
    71.43% { transform: translate(504.549px, -14.0527px); }
    85.71% { transform: translate(368.821px, -154.907px); }
    100.00% { transform: translate(174.071px, -136.612px); }
}

@keyframes login-animated-web-b-animate {
    0.00% { transform: translate(111.925px, 32.9695px); }
    14.29% { transform: translate(197.489px, -97.7624px); }
    28.57% { transform: translate(353.047px, -112.376px); }
    42.86% { transform: translate(461.462px, 0.133181px); }
    57.14% { transform: translate(441.094px, 155.043px); }
    71.43% { transform: translate(307.281px, 235.704px); }
    85.71% { transform: translate(160.787px, 181.376px); }
    100.00% { transform: translate(111.925px, 32.9695px); }
}

@keyframes login-animated-web-b-animate-reverse {
    0.00% { transform: translate(111.925px, 32.9695px); }
    14.29% { transform: translate(160.787px, 181.376px); }
    28.57% { transform: translate(307.281px, 235.704px); }
    42.86% { transform: translate(441.094px, 155.043px); }
    57.14% { transform: translate(461.462px, 0.133181px); }
    71.43% { transform: translate(353.047px, -112.376px); }
    85.71% { transform: translate(197.489px, -97.7624px); }
    100.00% { transform: translate(111.925px, 32.9695px); }
}

@keyframes login-animated-web-c-animate {
    0.00% { transform: translate(195.872px, 147.569px); }
    14.29% { transform: translate(160.231px, 39.321px); }
    28.57% { transform: translate(222.642px, -56.035px); }
    42.86% { transform: translate(336.106px, -66.6942px); }
    57.14% { transform: translate(415.184px, 15.3701px); }
    71.43% { transform: translate(400.328px, 128.362px); }
    85.71% { transform: translate(302.724px, 187.196px); }
    100.00% { transform: translate(195.872px, 147.569px); }
}

@keyframes login-animated-web-c-animate-reverse {
    0.00% { transform: translate(302.724px, 187.196px); }
    14.29% { transform: translate(400.328px, 128.362px); }
    28.57% { transform: translate(415.184px, 15.3701px); }
    42.86% { transform: translate(336.106px, -66.6942px); }
    57.14% { transform: translate(222.642px, -56.035px); }
    71.43% { transform: translate(160.231px, 39.321px); }
    85.71% { transform: translate(195.872px, 147.569px); }
    100.00% { transform: translate(302.724px, 187.196px); }
}

@keyframes login-animated-web-d-animate {
    0.00% { transform: translate(297.696px, 133.669px); }
    14.29% { transform: translate(234.585px, 110.264px); }
    28.57% { transform: translate(213.535px, 46.3292px); }
    42.86% { transform: translate(250.396px, -9.99125px); }
    57.14% { transform: translate(317.412px, -16.2869px); }
    71.43% { transform: translate(364.118px, 32.1831px); }
    85.71% { transform: translate(355.344px, 98.9197px); }
    100.00% { transform: translate(297.696px, 133.669px); }
}

@keyframes login-animated-web-d-animate-reverse {
    0.00% { transform: translate(297.696px, 133.669px); }
    14.29% { transform: translate(355.344px, 98.9197px); }
    28.57% { transform: translate(364.118px, 32.1831px); }
    42.86% { transform: translate(317.412px, -16.2869px); }
    57.14% { transform: translate(250.396px, -9.99125px); }
    71.43% { transform: translate(213.535px, 46.3292px); }
    85.71% { transform: translate(234.585px, 110.264px); }
    100.00% { transform: translate(297.696px, 133.669px); }
}

/* ===== AUTH FORM ===== */
.auth-form {
    width: 466px;
    margin: auto;
    background: #ededed;
    z-index: 10;
}

.auth-form__header {
    color: #474747;
    background: #c4c4c4;
    font-weight: 500;
    line-height: 32px;
    text-align: center;
}

.auth-form form {
    padding: 35px 65px 55px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.auth-form form > svg {
    display: block;
    margin: 0 auto 28px;
    width: 175px;
    height: 45px;
}

.auth-form form img {
    margin-bottom: 28px;
    width: 200px;
    height: auto;
}

.auth-form form .btn,
.auth-form form .field {
    width: 100%;
}

.auth-form form .btn {
    margin-top: 24px;
}

.auth-form form .field {
    margin-bottom: 15px;
}

.auth-form form .field input {
    height: 53px;
}

/* ===== FIELD - MATERIAL INPUT ===== */
.field--material-input p {
    text-align: center;
    left: 0;
    width: 100%;
    top: 14px;
    position: absolute;
    pointer-events: none;
    font-size: 18px;
    color: #666;
    transition: all 0.15s;
    z-index: 1;
}

.field--material-input input {
    padding-top: 12px;
    font-size: 17px;
    background-color: #fafafa;
    text-align: center;
    width: 100%;
    height: 53px;
    border: 1px solid #c4c4c4;
    border-radius: 2px;
    color: #000;
    transition: border-color 0.3s;
}

.field--material-input input:focus {
    border-color: #D62849;
    outline: none;
}

.field--material-input.focused p,
.field--material-input input:focus + p {
    top: 0;
    font-size: 13px;
    color: #737373;
}

.field--material-input.focused input {
    background: #fff;
}

/* ===== CHECKBOX WRAPPER ===== */
.checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    margin: 0 0 7.5px 0;
    width: 100%;
}

.checkbox-wrapper:last-of-type {
    margin-bottom: 0;
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-right: 8px;
    margin-top: 2px;
    flex-shrink: 0;
}

.checkbox-label input[type="checkbox"] {
    display: none;
}

.checkbox-label .checkmark {
    width: 16px;
    height: 16px;
    border: 2px solid #c4c4c4;
    border-radius: 2px;
    display: inline-block;
    position: relative;
    transition: all 0.2s;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark {
    background: #D62849;
    border-color: #D62849;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -60%) rotate(45deg);
}

.doc-link-text {
    color: #888;
    font-size: 12px;
    cursor: pointer;
    line-height: 1.4;
    transition: color 0.2s ease;
    user-select: none;
}

.doc-link-text:hover {
    color: #D62849;
    text-decoration: underline;
}

/* Spacing: first checkbox after inputs */
.auth-form form .field--material-input + .checkbox-wrapper {
    margin-top: 15px;
}

/* ===== ERROR MESSAGE ===== */
.error-message {
    margin: 0 0 15px;
    padding: 10px 12px;
    background: rgba(214, 40, 73, 0.08);
    border: 1px solid #D62849;
    color: #D62849;
    font-size: 13px;
    font-weight: 500;
    border-radius: 2px;
    text-align: center;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s, max-height 0.3s, margin 0.3s, padding 0.3s;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    border-width: 0;
}

.error-message.visible {
    opacity: 1;
    max-height: 60px;
    padding: 10px 12px;
    margin-bottom: 15px;
    border-width: 1px;
}

/* ===== BUTTON ===== */
.btn {
    border: none;
    cursor: pointer;
    font-family: "Exo 2", sans-serif;
    transition: background 0.3s;
    display: inline-block;
    height: 50px;
    padding: 0 30px;
    min-width: max-content;
    font-size: 19px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 2px;
    margin: 0;
    outline: none;
    box-sizing: border-box;
    user-select: none;
}

.btn--red {
    background: #D62849;
    width: 100%;
    margin-top: 24px;
}

.btn--red:hover {
    background: #ec3155;
}

.btn--loading .btn-text {
    opacity: 0;
}

.btn--loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== MODAL ===== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    cursor: pointer;
}

.modal-content {
    position: relative;
    background: #fff;
    max-width: 860px;
    width: 90%;
    max-height: 85vh;
    border-radius: 8px;
    overflow: hidden;
    z-index: 1001;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.modal-close {
    position: absolute;
    top: 30px;
    right: 30px;
    background-color: transparent;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggdHJhbnNmb3JtPSJtYXRyaXgoLjcwMDcgLjcxMzQ2IC0uNzAwNyAuNzEzNDYgMCAyKSIgc3Ryb2tlPSIjNkI2QjZCIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0iTTEtMWgyMS44MjciLz48cGF0aCB0cmFuc2Zvcm09Im1hdHJpeCgtLjcwMDcgLjcxMzQ2IC43MDA3IC43MTM0NiAxOCAyKSIgc3Ryb2tlPSIjNkI2QjZCIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0iTTEtMWgyMS44MjciLz48L3N2Zz4=");
    background-repeat: no-repeat;
    background-size: contain;
    width: 18px;
    height: 18px;
    cursor: pointer;
    border: none;
    padding: 0;
    z-index: 10;
}

.modal-close:hover {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggdHJhbnNmb3JtPSJtYXRyaXgoLjcwMDcgLjcxMzQ2IC0uNzAwNyAuNzEzNDYgMCAyKSIgc3Ryb2tlPSIjRDYyODQ5IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0iTTEtMWgyMS44MjciLz48cGF0aCB0cmFuc2Zvcm09Im1hdHJpeCgtLjcwMDcgLjcxMzQ2IC43MDA3IC43MTM0NiAxOCAyKSIgc3Ryb2tlPSIjRDYyODQ5IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0iTTEtMWgyMS44MjciLz48L3N2Zz4=");
}

.modal-body {
    padding: 36px 48px;
    overflow-y: auto;
    max-height: 85vh;
    font-size: 15px;
    line-height: 1.65;
    color: #333;
}

.modal-body::-webkit-scrollbar {
    width: 6px;
}

.modal-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

.modal-brand {
    text-align: center;
    margin-bottom: 16px;
}

.modal-brand svg {
    width: 120px;
    height: 32px;
    display: inline-block;
}

.modal-title {
    text-align: center;
    font-size: 19px;
    font-weight: 700;
    color: #222;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 8px;
    line-height: 1.3;
}

.modal-date {
    text-align: center;
    font-size: 14px;
    color: #888;
    margin: 0 0 16px;
}

.modal-divider {
    height: 1px;
    background: #D62849;
    margin: 0 0 20px;
    opacity: 0.6;
}

.modal-warning {
    background: #fff0f0;
    border-left: 3px solid #D62849;
    padding: 14px 18px;
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.55;
    color: #333;
}

.modal-warning strong {
    color: #D62849;
    font-weight: 600;
}

.modal-body h3 {
    color: #222;
    font-size: 16px;
    margin-top: 24px;
    margin-bottom: 10px;
    font-weight: 700;
}

.modal-body p {
    margin-bottom: 10px;
}

.modal-body p.numbered {
    margin-bottom: 8px;
    text-indent: 0;
}

.modal-body ul {
    margin-bottom: 14px;
    padding-left: 20px;
}

.modal-body li {
    margin-bottom: 5px;
}

.modal-body strong {
    color: #222;
    font-weight: 600;
}

/* === Device Approval Modal (v25.27 — matches auth-form: 466px, fully centered) === */
.device-modal .modal-content {
    width: 466px;
    max-width: 466px;
    text-align: center;
}

.device-modal-body {
    padding: 40px 36px 32px;
    text-align: center;
}

.device-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.device-modal-icon svg {
    width: 48px;
    height: 48px;
    color: #D62849;
}

.device-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #222;
    margin-bottom: 12px;
}

.device-modal-text {
    font-size: 14px;
    color: #555;
    line-height: 1.55;
    margin-bottom: 24px;
}

.device-modal-device-id {
    font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
    font-size: 11px;
    color: #999;
    background: #f2f2f2;
    padding: 6px 12px;
    border-radius: 4px;
    word-break: break-all;
    display: block;
    max-width: 100%;
    margin: 0 auto 24px;
    text-align: center;
}

.device-modal-btn {
    display: block;
    margin: 0 auto;
    height: 46px;
    padding: 0 42px;
    background: #D62849;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-family: 'Exo 2', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.device-modal-btn:hover {
    background: #b81e3c;
}


/* === Auth Error Modal (matches device-modal design) === */
.error-modal .modal-content {
    width: 466px;
    max-width: 466px;
    text-align: center;
}

.error-modal-body {
    padding: 40px 36px 32px;
    text-align: center;
}

.error-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.error-modal-icon svg {
    width: 48px;
    height: 48px;
    color: #D62849;
}

.error-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #222;
    margin-bottom: 12px;
}

.error-modal-text {
    font-size: 14px;
    color: #555;
    line-height: 1.55;
    margin-bottom: 24px;
}

.error-modal-btn {
    display: block;
    margin: 0 auto;
    height: 46px;
    padding: 0 42px;
    background: #D62849;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-family: 'Exo 2', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.error-modal-btn:hover {
    background: #b81e3c;
}