body {
    background:#0f0f10;
    color:#fff;
    font-family:-apple-system;
    margin:0;
}

.modalCard {
    padding-left:16px;
    padding-right: 16px;
    word-break:break-all;
}

.card {
    background:#1a1a1d;
    padding:14px;
    margin:12px 0;
    border-radius:12px;
}

.btn {
    background:#222;
    color:#ddd;
    border:1px solid #333;
    padding:10px 12px;
    border-radius:8px;
    margin:4px;
}

.btn.selected {
    border-color:#3b82f6;
}

.btn2 {
    background:#222;
    color:#ddd;
    border:1px solid #333;
    padding:10px 12px;
    border-radius:8px;
    margin:4px;
    flex: 1;
}

.btn2.selected {
    border-color:#3b82f6;
}

.hint {
    font-size:12px;
    opacity:0.6;
}

.abBox {
    gap: 10px;
    flex-wrap:wrap;
    display: -webkit-flex; /* Safari */
}

.item {
    flex: 1;
}
.bar {
    height:6px;
    background:#222;
    border-radius:10px;
    overflow:hidden;
    display: flex;
    justify-content: space-between;
}

.bar > div {
    height:100%;
    width:0%;
    background:#3b82f6;
}