:root {
    --prime-text-color: #22252a;
    --minor-text-color: #3164f4;
    --lines-text-color: #9c27b0;
    --background-color: #fbfbfb;
    --basic-transition: 0.5s ease;
}

@media (max-width: 375px) {
  body {
    zoom: 0.66;
  }
}

.notie-container {
    width: 100%;
    max-width: 600px !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 32px;
    box-sizing: border-box;
    background-color: var(--background-color);
    color: var(--prime-text-color);
    transition: 0.5s ease;
}

.central-container {
    width: 100%;
    max-width: 600px;
    min-height: 75vh;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1),
                0 1px 3px rgba(0, 0, 0, 0.05);
    background-image: radial-gradient(#e0e0e0 1.5px, transparent 1.5px); /* точки через радиальный градиент */
    background-size: 24px 24px;  /* шаг (расстояние между точками) */
}

.nav-link {
    text-align: center;
    font-size: 14.4px;
    text-decoration: none;
    opacity: 0.6;
    display: inline-block;
}

.nav-header {
    margin-bottom: 32px;
    display: flex;
    justify-content: space-between;
}

.nav-footer {
    margin-top: 32px;
}

.main-title {
    text-align: center;
    margin-bottom: 24px;
}

.auth_page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    padding: 16px;
}

.auth_page * {
    box-sizing: border-box;
    display: block;
    width: 100%;
}

.auth_error {
    color: red;
}

.list-wrapper {
    width: 100%;
}

.list-element {
    margin: 25px 0;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
}

.list-element[data-tail-counter]::before {
    content: attr(data-tail-counter);
    position: absolute;
    left: -15px;
    top: 100%;
    color: var(--prime-text-color);
    font-size: 80%;
}

.checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.checkbox select {
    position: absolute;
    width: inherit;
    height: inherit;
    opacity: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.list-element .checkbox::before {
    content: "";
    width: 20px;
    height: 20px;
    background-color: var(--prime-text-color);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-image: var(--svg-icon-empty);
    -webkit-mask-image: var(--svg-icon-empty);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

.list-element[data-status="active"] .checkbox::before {mask-image: var(--svg-icon-active); -webkit-mask-image: var(--svg-icon-active);}
.list-element[data-status="paused"] .checkbox::before {mask-image: var(--svg-icon-pause); -webkit-mask-image: var(--svg-icon-pause);}
.list-element[data-status="staged"] .checkbox::before {mask-image: var(--svg-icon-staged); -webkit-mask-image: var(--svg-icon-staged);}
.list-element[data-status="pending"] .checkbox::before {mask-image: var(--svg-icon-pending); -webkit-mask-image: var(--svg-icon-pending);}
.list-element[data-status="closed"] .checkbox::before {mask-image: var(--svg-icon-closed); -webkit-mask-image: var(--svg-icon-closed);}
.list-element[data-status="canceled"] .checkbox::before {mask-image: var(--svg-icon-canceled); -webkit-mask-image: var(--svg-icon-canceled);}


.separator {
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 40px;
    background: var(--prime-text-color);
    margin: 0 10px;
    transform: rotate(5deg);
}

.tie-desc {
    font-size: 150%;
    color: var(--prime-text-color);
}

.tie-desc a {
    color: var(--prime-text-color);
    cursor: pointer;
    text-decoration: underline 2px dotted var(--prime-text-color);
    display: block;
}

.tie-desc a:active {
    translate: 1px -1px;
}

.tail-desc {
    font-size: 150%;
    color: var(--prime-text-color);
    max-width: 35%;
}

.tale-desc {
    font-style: italic;
    font-size: 125%;
    color: var(--minor-text-color);
    padding-left: 5px;
    line-height: 1.2;
    text-shadow: 0 0 0.3px rgba(33, 59, 122, 0.2);
    max-width: 35%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: var(--basic-transition);
    opacity: 1;
}

input {
    border: none;
    outline: none;
    background: none;
    padding: 8px;
    border-radius: 4px;
    transition: 0.2s ease;
    font-style: italic;
    color: var(--minor-text-color);
    border-bottom: 2px dotted var(--minor-text-color);
}

.add_tale_x {
    cursor: pointer;
    width: 10px;
    height: 10px;
    border: none;
    outline: none;
    background: none;
    padding: 8px;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 4px;
    font-style: italic;
    color: var(--minor-text-color);
    transition: var(--basic-transition);
}

.add_tale_x:focus {
    cursor: auto;
    width: 300px;
    border-bottom: 2px dotted var(--minor-text-color);
}

.add_tale_x:not(:focus) {
    border-radius: 16px;
    background: rgba(156, 39, 176, 0.1);
}

.add_tale_x:hover {
    background: rgba(156, 39, 176, 0.3);
}

.add_tale_x:focus {
    background: none;
}

.list-element:has(.add_tale_x:focus) .tale-desc {
    max-width: 0;
    opacity: 0;
}

.add_tale_box {
    display: inline-flex;
    align-items: center;
}

.add_tale_input {
    opacity: 0;
    width: 10px;
    pointer-events: none;
}

.list-element[data-status="new"]:hover .add_tale_input,
.list-element[data-status="active"]:hover .add_tale_input,
.add_tale_input:not(:placeholder-shown) {
    opacity: 1;
    pointer-events: auto;
}

.list-element:has(.add_tale_box .add_tale_input:focus) .tale-desc {
    max-width: 0;
    opacity: 0;
}

.add_tale_input:focus {
    width: 225px;
}

.add_tale_input:not(:placeholder-shown):not(:focus) {
    border-bottom: 2px dotted red;
}

input:hover,
input:focus {
    transform: translateY(2px);
}

.add_tale {
    opacity: 0;
    transition: 0.5s ease;
    pointer-events: none;
}
.add_tale_input:not(:placeholder-shown) ~ .add_tale {
    opacity: 1;
    pointer-events: auto;
}

.add_tail {
    opacity: 0;
    transition: 0.5s ease;
    pointer-events: none;
}

.add_tail_input:not(:placeholder-shown) ~ .add_tail {
    opacity: 1;
    pointer-events: auto;
}

.add_tie {
    opacity: 0;
    transition: 0.5s ease;
    pointer-events: none;
}

.add_tie_input:not(:placeholder-shown) ~ .add_tie {
    opacity: 1;
    pointer-events: auto;
}

/* для зачеркивания */
.list-element::after {
    content: "";
    position: absolute;
    left: -10px;
    right: 0;
    height: 100%;
    top: 0;
    bottom: 0;
    pointer-events: none;
    mask-image: var(--empty);
    -webkit-mask-image: var(--empty);
    background-color: var(--lines-text-color);
    filter: blur(2px) opacity(75%);
}

.list-element[data-status="staged"]::after {
    -webkit-mask-image: var(--waveline);
    mask-image: var(--waveline);
}

.list-element[data-status="pending"]::after {
    -webkit-mask-image: var(--zigzag3);
    mask-image: var(--zigzag3);
}

.list-element[data-status="paused"]::after {
    -webkit-mask-image: var(--tripleline);
    mask-image: var(--tripleline);
}

.list-element[data-status="closed"]::after {
    -webkit-mask-image: var(--hatched1);
    mask-image: var(--hatched1);
}

.list-element[data-status="canceled"]::after {
    -webkit-mask-image: var(--zigzag4);
    mask-image: var(--zigzag4);
}

.list-element:nth-of-type(1n)::after { mask-size: 100%; }
.list-element:nth-of-type(2n)::after { mask-size: 97%; }
.list-element:nth-of-type(3n)::after { mask-size: 102%; }
.list-element:nth-of-type(4n)::after { mask-size: 99%; }
.list-element:nth-of-type(5n)::after { mask-size: 104%; }


.show_token div {
    font-family: monospace;
    font-size: 75%;
    background: #ffffff80;
    padding: 16px;
    cursor: pointer;
}

.show_token div:active {
    translate: 2px;
    border: 2px solid rgba(255, 0, 0, 0.75);
}

.show_token div:focus::after {
    content: "скопировано";
    padding: 5px 0;
    display: block;
    font-style: italic;
}