* {
    -webkit-tap-highlight-color: transparent;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    justify-content: center;
    background-color: #0d0d0d;
    font-family: 'JetBrains Mono', monospace;
    color: #e1e1e1;
}

.container {
    width: 768px;
    margin: 32px 24px;
}

.title {
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.43;
    text-align: center;
}

.alert {
    box-shadow: 0 0 0 1.5px #ffffff03 inset;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding: 12px;
    background: #1a1a1a80;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.33;
    color: #818181;
}

.alert a {
    color: #fb923c;
    text-decoration: none;
}

.alert a:hover {
    text-decoration: underline;
}

.alert-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-right: 12px;
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 12C3 13.1819 3.23279 14.3522 3.68508 15.4442C4.13738 16.5361 4.80031 17.5282 5.63604 18.364C6.47177 19.1997 7.46392 19.8626 8.55585 20.3149C9.64778 20.7672 10.8181 21 12 21C13.1819 21 14.3522 20.7672 15.4442 20.3149C16.5361 19.8626 17.5282 19.1997 18.364 18.364C19.1997 17.5282 19.8626 16.5361 20.3149 15.4442C20.7672 14.3522 21 13.1819 21 12C21 9.61305 20.0518 7.32387 18.364 5.63604C16.6761 3.94821 14.3869 3 12 3C9.61305 3 7.32387 3.94821 5.63604 5.63604C3.94821 7.32387 3 9.61305 3 12Z" stroke="%23fb923c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 8V12" stroke="%23fb923c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 16H12.01" stroke="%23fb923c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.shout {
    margin-bottom: 2px;
    font-weight: bold;
    color: #fb923c;
}

.menu {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 768px) {
    .menu {
        grid-template-columns: 1fr;
    }
}

.menu-item {
    box-shadow: 0 0 0 1.5px #ffffff03 inset;
    display: flex;
    flex-direction: column;
    padding: 12px;
    background: radial-gradient(circle at 0% 0%, var(--menu-color) 0%, #1a1a1a4d 25%);
    cursor: pointer;
    border-radius: 12px;
    text-decoration: none;
}

.menu-item:nth-child(1) {
    --menu-color: #1e67dd40;
    box-shadow: 0 0 0 1.5px #ffffff06 inset;
    background: radial-gradient(circle at 0% 0%, var(--menu-color) 0%, #191919 25%);
}

.menu-item:nth-child(2) {
    --menu-color: #1ed76020;
}

.menu-item:nth-child(3) {
    --menu-color: #da395940;
    box-shadow: 0 0 0 1.5px #ffffff06 inset;
    background: radial-gradient(circle at 0% 0%, var(--menu-color) 0%, #191919 25%);
}

.menu-item:nth-child(4) {
    --menu-color: #da395940;
    box-shadow: 0 0 0 1.5px #ffffff06 inset;
    background: radial-gradient(circle at 0% 0%, var(--menu-color) 0%, #191919 25%);
}

.menu-item:nth-child(5) {
    --menu-color: #f7a47e40;
    box-shadow: 0 0 0 1.5px #ffffff06 inset;
    background: radial-gradient(circle at 0% 0%, var(--menu-color) 0%, #191919 25%);
}

.menu-item:hover {
    background: radial-gradient(circle at 0% 0%, var(--menu-color) 0%, #232323 25%);
}

.menu-item:hover:nth-child(2) {
    background: radial-gradient(circle at 0% 0%, var(--menu-color) 0%, #2323234d 25%);
}

.menu-title {
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.33;
    color: #e1e1e1;
}

.menu-version {
    margin-left: 6px;
    font-size: 12px;
    line-height: 1.33;
    color: #818181;
}

.download-icon {
    width: 14px;
    height: 14px;
    margin-left: 2px;
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 16.5V18.5C4 19.0304 4.21071 19.5391 4.58579 19.9142C4.96086 20.2893 5.46957 20.5 6 20.5H18C18.5304 20.5 19.0391 20.2893 19.4142 19.9142C19.7893 19.5391 20 19.0304 20 18.5V16.5" stroke="%23818181" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M7 10.5L12 15.5L17 10.5" stroke="%23818181" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 3.5V15.5" stroke="%23818181" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.menu-date {
    font-size: 12px;
    line-height: 1.33;
    color: #818181;
}

.menu-description {
    margin: 6px 0 6px;
    font-size: 12px;
    line-height: 1.33;
    color: #e0e0e0b3;
}

.menu-item:nth-child(2) .menu-title,
.menu-item:nth-child(2) .menu-version,
.menu-item:nth-child(2) .menu-date,
.menu-item:nth-child(2) .menu-description {
    opacity: 0.5;
}

.menu-chips {
    display: flex;
    gap: 6px;
    align-self: flex-end;
    margin-top: auto;
}

.menu-chip {
    padding: 8px;
    border-radius: 6px;
    font-size: 10px;
}

.menu-chip.working {
    background: #052e16;
    color: #4ade80;
}

.menu-chip.warning {
    background: #431407;
    color: #fb923c;
}

.menu-chip.not-working {
    background: #191919;
    color: #818181;
}

.posa {
    height: 32px;
    border-radius: 4px;
}

.modal-posa {
    backdrop-filter: blur(1px);
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
}

.modal-posa img,
.modal-posa video {
    border-radius: 12px;
}

.modal-posa.active {
    display: flex;
}

.footer {
    margin-top: 16px;
    font-size: 12px;
    line-height: 1.33;
    color: #82828280;
    text-align: right;
}

.footer a {
    color: #5e81ac80;
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}